直接給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就如同一般的上傳一樣

 

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 baechang 的頭像
    baechang

    翁百璋與大泡泡的奇幻旅程

    baechang 發表在 痞客邦 留言(0) 人氣()