• MVC上传多张图片


    改变上传文件的按钮样式:

    <div id="post-upload-image">
                        <div id="divfile_-1">
                            <input id="file_-1" type="file" name="file" style="display:none;" onchange="selectImage('file_-1')" />
    
                            <label for="file_-1" style="font-weight:normal; cursor:pointer;" class="publish-space-form-img text-center publish-add-img">
                                <i class="glyphicon glyphicon-plus"></i>
                                <br />插入图片
                            </label>
                        </div>
    </div>

    MVC中选择图片:有多少个<input type="flie" />控制器中通过Request.Form.Files就会接受到多少张图片。

     function selectImage(id) {
                var fileInput = document.getElementById(id);
                var file = fileInput.files[0];
                if (fileInput.files && file) {
                    imageI += 1;
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $("<div class='publish-post-image'>" +
                            "<div class='publish-space-form-img text-center publish-div-shadow' style='display:none;'>" +
                            "<i class='glyphicon glyphicon-trash'></i>" +
                            "</div>" +
                            "<img src='" + e.target.result + "' class='publish-space-form-img' id='image_" + imageI + " '/>" +
                            "</div>"
                            ).appendTo('#post-images');
    
                        var selectIdName = '#divfile_' + (imageI - 1);
                        $(selectIdName).hide();
    
                        $("<div id='divfile_" + imageI + "'>" +
                        "<input id='file_" + imageI + "' type='file' name='file' style='display:none;' onchange=" + "selectImage('file_" + imageI + "') />" +
                        "<label for='file_" + imageI + "'style='font-weight:normal; cursor:pointer;' class='publish-space-form-img text-center publish-add-img'><i class='glyphicon glyphicon-plus'></i><br />插入图片</label>" +
                        "</div>").appendTo("#post-upload-image");
                    }
    
                    reader.readAsDataURL(file);
                }
            }
  • 相关阅读:
    定时清理日志的shell脚本
    图解 Elestricsearch 写入流程
    消息队列产生严重消息堆积怎么处理?
    消息队列如何确保消息的有序性?
    架构模式 CQRS
    消息队列把消息弄丢了怎么办?
    3 个主流 Java 微服务框架
    RabbitMQ、Kafka、RocketMQ 是如何实现高可用的?
    Kafka 不再需要 ZooKeeper
    微服务设计原则
  • 原文地址:https://www.cnblogs.com/maoyazhi/p/6141821.html
Copyright © 2020-2023  润新知