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); } }