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 相关文章推荐
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
Jan 11 Javascript
js获取表格的行数和列数的方法
Oct 23 Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 Javascript
莱鸟介绍javascript onclick事件
Jan 06 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
详解在Node.js中发起HTTP请求的5种方法
Jan 10 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
js里面的变量范围分享
Jul 18 Javascript
Element Input输入框的使用方法
Jul 26 Javascript
vue实现简单的登录弹出框
Oct 26 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
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
js判断变量是否空值的代码
2008/10/26 Javascript
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
Vue函数式组件的应用实例详解
2019/08/30 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
python的等深分箱实例
2019/11/22 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
使用python实现名片管理系统
2020/06/18 Python
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
中科创达面试题
2016/12/28 面试题
优秀的导游求职信范文
2014/04/06 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
微信搭讪开场白
2015/05/28 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python
centos8安装MongoDB的详细过程
2021/10/24 MongoDB
MySQL分区路径子分区再分区
2022/04/13 MySQL