首頁 > web前端 > js教程 > 主體

JS實作多圖預覽上傳的實例程式碼

零下一度
發布: 2017-06-27 15:34:24
原創
1734 人瀏覽過

这篇文章主要介绍了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);
    });
});
登入後複製

以上是JS實作多圖預覽上傳的實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!