js上传图片进行预览

上传图片经常遇到这样的问题，就是需要实现预览，由于浏览器的安全机制，不能直接读取本地文件，所以需要使用js绕一圈实现预览效果

HTML代码如下

<input type="file"  name="file" id="doc" multiple="multiple"  style="width:150px;margin-left:0px;" onChange="javascript:setImagePreviews();" />  <!-- accept="image/*"规定上传中服务器只接受图像文件-->

js代码如下

//下面用于多图片上传预览功能function setImagePreviews(){var docObj = document.getElementById("doc");var dd = document.getElementById("dd");dd.innerHTML = "";var fileList = docObj.files;for (var i = 0; i < fileList.length; i++){dd.innerHTML += "<div > <img id='img" + i + "'  /> </div>";var imgObjPreview = document.getElementById("img"+i);if (docObj.files && docObj.files[i]){//火狐下，直接设img属性imgObjPreview.style.display = 'block';imgObjPreview.style.width = '180px';imgObjPreview.style.height = '180px';//imgObjPreview.src = docObj.files[0].getAsDataURL();//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要以下方式imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);}else {//这段是对文件上传做处理，返回上传时选定的路径docObj.select();var imgSrc = document.selection.createRange().text;var localImagId = document.getElementById("img" + i);//必须设置初始大小localImagId.style.width = "150px";localImagId.style.height = "180px";//图片异常的捕捉，防止用户修改后缀来伪造图片try {//IE下，使用滤镜localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;}catch (e) {alert("您上传的图片格式不正确，请重新选择!");return false;}imgObjPreview.style.display = 'none';document.selection.empty();}}return true;}

js上传图片进行预览相关推荐

本地如何预览php文件上传,如何实现js上传图片本地预览同时支持预览截图的功能...
在项目中经常会用到js上传图片本地预览的效果,同时需要在预览图上直接预览截图的范围. 下面是我写的简单的demo,是用js结合cropper.js模拟实现此项前端的功能,后台则不考虑. 准备:引入文件 ...
上传身份证照片js_html+css+js 实现拍照预览上传图片功能
前言:我们在做网页时经常会需要有上传图片的需求,可能是选择图片或者拍照上传,如果简单的使用这种方式虽然也能实现功能,但用户体验上可能会差了一些,所以本文记录了使用css+js实现图片选中后的预览及压缩 ...
javascript --- [FormData的使用] 文件上传进度条展示文件上传图片即使预览
1. 准备工作因为要发送Ajax请求,而Ajax技术的运行需要网站环境,因此其中一个解决方案是,将页面作为网站的静态资源暴露出来,然后通过浏览器进行访问. 1.1 静态资源使用express将pu ...
ajax图片预览,Ajax 上传图片并预览的简单实现
1. 直接上最简单的一种 ajax 异步上传图片,并预览 html: 图片上传 | cookie file: desc: function upload() { $.ajaxFileUpload({ ...
thinkphp5通过ajax上传图片并预览
thinkphp5通过ajax上传图片并预览一.具体需求如图所术: 二.html代码: 三.js代码四.控制器php代码: 一.具体需求如图所术: 二.html代码: <form class ...
JavaScript上传图片及时预览
JavaScript上传图片及时预览 /*******************************正面图片上传预览开始****************************/ f ...
2016/4/19 ①单个文件上传 ②上传图片后预览图片
1,f1.php <!DOCTYPE html> <htmllang="en"> <head><metacharset="UTF ...
js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
//js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 <!DOCTYPE html> <html xmlns="http: ...
jquery上传图片本地预览插件V1.2
v1.2 1.修复jquery版本高于1.9,插件报错BUG. 2.提供未压缩代码. 插件支持IE全系列谷歌火狐等浏览器注意:不支持safari 插件使用说明: 1.必须引用jquery ...

js上传图片进行预览

js上传图片进行预览相关推荐

最新文章

热门文章