JS实现多图预览上传的实例代码

这篇文章主要介绍了JS实现多张图片预览同步上传功能的相关资料,需要的朋友可以参考下

废话不多说了，直接给大家贴代码了，具体代码如下所示：

/**
 * Created by liujing on 2017/5/10.
 */
$(document).ready(function($) {
  function changef(which,bulk,name_n){
    var bulka = bulk;
    var thisid = which.attr("id");
    var f = which.prop ('files')[0];
    var filename = f.name;
    var mime = filename.toLowerCase().substr(filename.lastIndexOf("."));
    var liid = $("#"+thisid).closest("li").attr("id");
    var liidb = parseInt(liid)+1;
    if(mime==".jpg" || mime==".png"){
      var src = window.URL.createObjectURL(f);
      var name = $("#logo"+liid).val().split("\\").pop();
      $('#logotips'+liid).css({"background":'url('+src+')','backgroundSize':100+'%'});
      $('#up_flower'+liid).empty().append(name);
      $(&#39;#&#39;+liid).append(&#39;<a class="edit_text">✖</a>&#39;);
      bulka.append(&#39;<li class="uploading" id="&#39;+liidb+&#39;"><a class="a_a" id="logotips&#39;+liidb+&#39;"><input class="input_hide logo&#39;+liidb+&#39;" type="file" name="&#39;+name_n+&#39;" id="logo&#39;+liidb+&#39;"></a></li>&#39;);
      $(&#39;#logotips&#39;+liidb).css({"background":&#39;url("../../img/c_up.png")&#39;,&#39;backgroundSize&#39;:100+&#39;%&#39;});
    }
    $(&#39;.logo&#39;+liid).addClass("newc"+liid);
    $(&#39;.newc&#39;+liid).removeClass("logo"+liid);
    $(&#39;.newc&#39;+liid).on(&#39;change&#39;,function(){
      var files = $(this).prop(&#39;files&#39;)[0];
      var srcb = window.URL.createObjectURL(files);
      var liid = $("#"+thisid).closest("li").attr("id");
      var liidb = parseInt(liid)+1;
      var name = $("#logo"+liid).val().split("\\").pop();
      $(&#39;#logotips&#39;+liid).css({"background":&#39;url(&#39;+srcb+&#39;)&#39;,&#39;backgroundSize&#39;:100+&#39;%&#39;});
      $(&#39;#up_flower&#39;+liid).empty().append(name);
    })
    $(&#39;.edit_text&#39;).on(&#39;click&#39;,function(){
      $(this).parent().remove();
    })
  } 
  function changelast(which ,bulk){
    var bulka = bulk;
    var thisid = which.attr("id");
    var f = which.prop (&#39;files&#39;)[0];
    var filename = f.name;
    var mime = filename.toLowerCase().substr(filename.lastIndexOf("."));
    var liid = $("#"+thisid).closest("li").attr("id");
    var liidb = parseInt(liid)+1;
    if(mime==".jpg" || mime==".png"){
      var src = window.URL.createObjectURL(f);
      var name = $("#logo"+liid).val().split("\\").pop();
      $(&#39;#logotips&#39;+liid).css({"background":&#39;url(&#39;+src+&#39;)&#39;,&#39;backgroundSize&#39;:100+&#39;%&#39;});
      $(&#39;#up_flower&#39;+liid).empty().append(name);
      $(&#39;#&#39;+liid).append(&#39;<a class="edit_text">✖</a>&#39;);
    }
    $(&#39;.logo&#39;+liid).addClass("newc"+liid);
    $(&#39;.newc&#39;+liid).removeClass("logo"+liid);
    $(&#39;.newc&#39;+liid).on(&#39;change&#39;,function(){
      var files = $(this).prop(&#39;files&#39;)[0];
      var srcb = window.URL.createObjectURL(files);
      var liid = $("#"+thisid).closest("li").attr("id");
      var liidb = parseInt(liid)+1;
      var name = $("#logo"+liid).val().split("\\").pop();
      $(&#39;#logotips&#39;+liid).css({"background":&#39;url(&#39;+srcb+&#39;)&#39;,&#39;backgroundSize&#39;:100+&#39;%&#39;});
      $(&#39;#up_flower&#39;+liid).empty().append(name);
    })
    $(&#39;.edit_text&#39;).on(&#39;click&#39;,function(){
      $(this).parent().remove();
    })
  } 
    $(".logo1").one("change",function(){
      that = $(this); var bulk = $("#add_beo"); var name = $(this).attr(&#39;name&#39;); changef(that,bulk,name);
    });
    $("#add_beo").one("change",".logo2",function(){
      that = $(this); var bulk = $("#add_beo"); var name = $(this).attr(&#39;name&#39;); changef(that,bulk,name);
    });
    $("#add_beo").one("change",".logo3",function(){
      that = $(this); var bulk = $("#add_beo"); var name = $(this).attr(&#39;name&#39;); changef(that,bulk,name);
    });
    $("#add_beo").one("change",".logo4",function(){
      that = $(this); var bulk = $("#add_beo"); var name = $(this).attr(&#39;name&#39;); changef(that,bulk,name);
    });
    $("#add_beo").one("change",".logo5",function(){
      that = $(this); var bulk = $("#add_beo"); changelast(that , bulk);
    });
});

Atas ialah kandungan terperinci JS实现多图预览上传的实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!