input 标签如何multiple 上传多张图片 实时在页面显示图片
2016-08-18 17:16
716 查看
通过jquery方式来将input文件一个个用FormData对象接受,同一传给后台,后台对每一个图片文件进行保存
在页面实时显示图片,其原理时通过读取本地文件的路径,达到马上显示图片的效果,可以及时对图片进行一个删除重选的操作
//初始化FormData对象 var formData = new FormData(); //fileName为input的id var $file = $("#fileName"); var fileObj = $file[0]; var n = fileObj.files.length; for(var i=0;i<n;i++){ formData.append("file"+i,fileObj.files[i]); } 通过ajax方式上传给后台接受
在页面实时显示图片,其原理时通过读取本地文件的路径,达到马上显示图片的效果,可以及时对图片进行一个删除重选的操作
//jquery 监视事件,当input输入图片文件时,实时在指定的位置加载图片 var $file = $("#imgFile"); var fileObj = $file[0]; //console.log(fileObj.files.length); var windowURL = window.URL || window.webkitURL; var dataURL; if (fileObj && fileObj.files&&fileObj.files[0]) { var $img = $("#mainPreview"); dataURL = windowURL.createObjectURL(fileObj.files[0]); $img.attr('src', dataURL); }
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- JavaScript 各种遍历方式详解
- 数组方法汇总
- 按右键另存图片只能存BMP
- photoshop去除图片上的水印
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果