JS实现多张图片预览同步上传功能


Posted in Javascript onJune 23, 2017

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

/**
 * 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);
      $('#'+liid).append('<a class="edit_text">✖</a>');
      bulka.append('<li class="uploading" id="'+liidb+'"><a class="a_a" id="logotips'+liidb+'"><input class="input_hide logo'+liidb+'" type="file" name="'+name_n+'" id="logo'+liidb+'"></a></li>');
      $('#logotips'+liidb).css({"background":'url("../../img/c_up.png")','backgroundSize':100+'%'});
    }
    $('.logo'+liid).addClass("newc"+liid);
    $('.newc'+liid).removeClass("logo"+liid);
    $('.newc'+liid).on('change',function(){
      var files = $(this).prop('files')[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();
      $('#logotips'+liid).css({"background":'url('+srcb+')','backgroundSize':100+'%'});
      $('#up_flower'+liid).empty().append(name);
    })
    $('.edit_text').on('click',function(){
      $(this).parent().remove();
    })
  } 
  function changelast(which ,bulk){
    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);
      $('#'+liid).append('<a class="edit_text">✖</a>');
    }
    $('.logo'+liid).addClass("newc"+liid);
    $('.newc'+liid).removeClass("logo"+liid);
    $('.newc'+liid).on('change',function(){
      var files = $(this).prop('files')[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();
      $('#logotips'+liid).css({"background":'url('+srcb+')','backgroundSize':100+'%'});
      $('#up_flower'+liid).empty().append(name);
    })
    $('.edit_text').on('click',function(){
      $(this).parent().remove();
    })
  } 
    $(".logo1").one("change",function(){
      that = $(this); var bulk = $("#add_beo"); var name = $(this).attr('name'); changef(that,bulk,name);
    });
    $("#add_beo").one("change",".logo2",function(){
      that = $(this); var bulk = $("#add_beo"); var name = $(this).attr('name'); changef(that,bulk,name);
    });
    $("#add_beo").one("change",".logo3",function(){
      that = $(this); var bulk = $("#add_beo"); var name = $(this).attr('name'); changef(that,bulk,name);
    });
    $("#add_beo").one("change",".logo4",function(){
      that = $(this); var bulk = $("#add_beo"); var name = $(this).attr('name'); changef(that,bulk,name);
    });
    $("#add_beo").one("change",".logo5",function(){
      that = $(this); var bulk = $("#add_beo"); changelast(that , bulk);
    });
});

以上所述是小编给大家介绍的JS实现多张图片预览同步上传功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
Jquery知识点三 jquery表单对象操作
Jan 17 Javascript
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
js实现省市级联效果分享
Aug 10 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
Javascript实现购物车功能的详细代码
May 08 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
vue实现移动端省市区选择
Sep 27 Javascript
Vue组件化通讯的实例代码
Jun 23 #Javascript
JavaScript字符串检索字符的方法
Jun 23 #Javascript
Angular2 组件通信的实例代码
Jun 23 #Javascript
js实现文字列表无缝滚动效果
Jun 23 #Javascript
jquery图片放大镜效果
Jun 23 #jQuery
Avalonjs双向数据绑定与监听的实例代码
Jun 23 #Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 #Javascript
You might like
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
Windows环境下python环境安装使用图文教程
2018/03/13 Python
简单实现python聊天程序
2018/04/01 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
python编写简单端口扫描器
2019/09/04 Python
python3获取url文件大小示例代码
2019/09/18 Python
python如何更新包
2020/06/11 Python
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
党校自我鉴定范文
2013/10/02 职场文书
求职者应聘的自我评价
2013/10/16 职场文书
汽车技术服务英文求职信范文
2014/01/02 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
助理政工师申报材料
2014/06/03 职场文书
社区灵活就业证明
2014/11/03 职场文书
大学生见习总结报告
2015/06/24 职场文书
2015中秋节晚会主持词
2015/07/01 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
Python实现科学占卜 让视频自动打码
2022/04/09 Python