直接給Code
https://jsfiddle.net/j3uybk2j/5/
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
$(document).ready(function() { if (window.File && window.FileList && window.FileReader) { $("#files").on("change", function(e) { var files = e.target.files, filesLength = files.length; for (var i = 0; i < filesLength; i++) { var f = files[i] var fileReader = new FileReader(); fileReader.onload = (function(e) { var file = e.target; $("<span class=\"pip\">" + "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" + "<br/><span class=\"remove\">Remove image</span>" + "</span>").insertAfter("#files"); $(".remove").click(function(){ $(this).parent(".pip").remove(); }); }); fileReader.readAsDataURL(f); } }); } else { alert("Your browser doesn't support to File API") } }); |
要注意就是這都是Client端進行,
速度非常快, 不要到server端再來縮圖等等
後續確定上傳到Server就如同一般的上傳一樣
全站熱搜
留言列表