MVC上传多张图片

最新推荐文章于 2021-02-27 21:56:53 发布

dengkecou4635

最新推荐文章于 2021-02-27 21:56:53 发布

阅读量139

点赞数

文章标签：测试

原文链接：http://www.cnblogs.com/maoyazhi/p/6141821.html

版权

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

<div id="post-upload-image">
                    <div id="divfile_-1">
                        <input id="file_-1" type="file" name="file" style="display:none;" οnchange="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;' οnchange=" + "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);
            }
        }