js实现图片上传前的预览
js图片上传前预览功能(兼容所有浏览器)
网上找到的一份文件上传前预览的代码,转自JavaScript 图片的上传前预览（兼容所有浏览器） <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> #preview, .img, img { width: 200px; height: 200px; } #preview { border: 1px solid #000; } </style></head><body> <div id="preview"></div> <input type="file" onchange="preview(this)" /> <script type="text/javascript"> function preview(file) { var prevDiv = document.getElementById('preview'); if (file.files && file.files[0]) { var reader = new FileReader(); reader.onload = function(evt) { prevDiv.innerHTML = '<img src="' + evt.target.result + '" />'; } reader.readAsDataURL(file.files[0]); } else { prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>'; } } </script></body></html>实现要点:●对于Chrome、Firefox、IE10 使用FileReader 来实现。
浏览器图片选择预览、旋转、批量上传的JS代码实现
浏览器图⽚选择预览、旋转、批量上传的JS代码实现⼯作中遇到的业务场景，和同事⼀起研究了下，主要是为了兼容IE版本其实就是⼀些琐碎的知识点在⽹上搜集下解决⽅式，然后集成了下，主要有以下点：1. IE input type=file的图⽚预览要⽤IE的filter cssprogid:DXImageTransform.Microsoft.AlphaImageLoaderchrome/firefox则⽤File api的file reader2. 图⽚旋转，IE⽤progid:DXImageTransform.Microsoft.Matrix的filter（filter可以组合⽤，⽤空格隔开）chrome/firefox⽤canvas3. 上传图⽚，我⽤的都是不可见的iframe ⾥的form动态的添加input[type=file]去实现。
chrome/firefox可以⽤xhr，但我懒得去修改了4. 其中为了实现上传图⽚不刷新本页⾯，⼜能反复选择⽂件，所以还⽤⼀个iframe专门维护⼀个input[type=file]的列表，⽐较偷巧。
可以参考下代码，主要是⼀个主html，然后两个iframe的html，上传的服务端返回的数据为上传成功的file name，⽤于删除预览图。
复制代码代码如下:// 上传回调// resultList -> ['file1', 'file2'] 为上传成功的file namevar uploadCallback = function(resultList){console.log(JSON.stringify(resultList));var i = 0;for(; i < resultList.length; i++){var index = resultList[i].substr('file'.length);$(':checkbox[value=' + index + ']').parent().parent().remove();}};$(function(){// 保存图⽚旋转的⾓度，以便提交给服务端处理var rotateAng = {};// ⽤于命名后缀的序号var cc = 0;// 如果是chrome/ff，需要⽤file api去⽣成imgvar genImgTpl = function(input, index){return '<img src="/webx/public/1.png" class="main" id="img' + index + '" />';};var readImgFromInput = function(_input, index){var inputDom = _input[0];// chrome/ffif(inputDom['files']){var reader = new FileReader();reader.onload = function(e){$('img.main:last').attr({src : e.target.result});}reader.readAsDataURL(inputDom['files'][0]);}else{var src = _input[0].value;var imgDom = $('#img' + index);imgDom.attr('src-old', src);imgDom.css({float: 'left',position: 'relative',overflow: 'hidden',width: '195px',height: '195px'});imgDom.css({'filter':"progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + src + "\")"}); }};var showImg = function(_input){var index = ++cc;_input.addClass('hide');_input.attr('name', 'file' + index);_input.attr('data-index', index);var iframeWin = $('#choose')[0].contentWindow;iframeWin.addInput(_input);var tpl = '<div>' + genImgTpl(_input, index) +'<span class="choose"><input type="checkbox" value="' + index + '" checked="true" /></span>' +'<span class="opts turn-right"><img src="img/rightBtn.png" /></span>' +'</div>';$('#imgDiv').append(tpl);readImgFromInput(_input, index);};var addAnother = function(){$('#uploadBtn').before('<input type="file" name="file" />');};// input[type=file]的绑定事件$('#uploadDiv input').live('change', function(){var path = this.value;if(!path){return;}showImg($(this));addAnother();});// 可以在checkbox时候remove input// $('#imgDiv input:checkbox').live('change', function(){// var isChecked = $(this).is(':checked');// console.log(isChecked);// });$('#imgDiv span.turn-right').live('click', function(){// 上次旋转的⾓度var index = $(this).siblings('span.choose').find('input').val();var oldAng = rotateAng[index] || 0;var newAng = oldAng + 90;rotateAng[index] = newAng;$('#img' + index).rotate(90);});// 表单提交时候根据checkbox，删除未choose的input[type=file]$('#uploadBtn').click(function(){var choosedNum = $('#imgDiv input:checkbox').filter(':checked').length;if(!choosedNum){alert('请选择上传⽂件！');return false;}// 选中的序号数组var choosedIndexList = $('#imgDiv input:checkbox').filter(':checked').map(function(){ return this.value;}).get();// 两个iframe，⼀个⽤于保存选择的input[type=file]// ⼀个⽤于form uploadvar uploadIframe = $('#upload')[0].contentWindow;var chooseIframe = $('#choose')[0].contentWindow;var i = 0;for(; i < choosedIndexList.length; i++){var index = choosedIndexList[i];var inputFile = chooseIframe.$('#uploadDiv input').filter('[data-index=' + index + ']'); uploadIframe.$('#uploadForm').append(inputFile);// 旋转度数var ang = rotateAng[index] || 0;if(ang % 360 != 0){var tplInput = '<input type="hide" name="ang' + index + '" value="' + ang + '" />'; uploadIframe.$('#uploadForm').append(tplInput);}}uploadIframe.doUpload();return false;});});IE7、8、9和chrome中测试没有问题。
pdf.js实现图片在线预览
pdf.js实现图⽚在线预览项⽬需求 前段时间项⽬中遇到了⼀个模块，是关于在线预览word⽂档（PDF⽂件）的，所以，找了很多插件，例如，pdf.js，pdfobject.js框架，但是pdfobject.js框架对于IE浏览器不兼容，所以，选择了使⽤pdf.js，这⾥记录⼀下，以后使⽤的时候好查找，也希望可以帮助有需要的⼈。
word⽂件转pdf⽂件 ⾸先需要将指定的word⽂档转为pdf⽂件，⽅法有很多，这⾥不介绍，有需要的童鞋可以去⽹上下载即可。
我这⾥⽤的是OpenOffice，版本是4.1.6，使⽤很简单，下载好了以后，根据提⽰进⾏安装，然后到任务管理器中，找到OpenOffice服务，开启即可，然后写⼀段代码，将word⽂件转为pdf⽂件，，这⾥附上我的转化代码。
public class office {/** 获取每⼀个⽂件的名称*/public static void getFile(File file){if(file != null){File[] f = file.listFiles();if(f != null){for(int i=0;i<f.length;i++){getFile(f[i]);String filename = f[i].getName();System.out.println(filename);//System.out.println("PDF⽂件名："+filename.substring(0,14));office2PDF("D:/test4/"+filename,"D:/pdf4/"+filename.substring(0,14)+".pdf");//根据⾃⼰需要获取pdf⽂件的⽂件名}System.out.println("*******************恭喜！转换结束了******************");}else{//System.out.println(file);}}}/** word 转 pdf ⽅法*/public static int office2PDF(String sourceFile, String destFile) {try {File inputFile = new File(sourceFile);if (!inputFile.exists()) {return -1;}File outputFile = new File(destFile);if (!outputFile.getParentFile().exists()) {outputFile.getParentFile().mkdirs();}OpenOfficeConnection connection = new SocketOpenOfficeConnection("127.0.0.1", 8100);//端⼝是固定的，IP根据⾃⼰服务所在的服务器进⾏配置connection.connect();//获去连接DocumentConverter converter = new OpenOfficeDocumentConverter(connection);converter.convert(inputFile, outputFile);//关闭连接connection.disconnect();return 0;} catch (Exception e) {e.printStackTrace();return -1;}}public static void main(String[] args) {//单个⽂件转换office2PDF("需要转换的word⽂件路径", "转换后输出pdf⽂件的路径");//多个⽂件转换String path = "多个word⽂件所在的⽬录";File f = new File(path);office.getFile(f);}}使⽤pdf.js插件在线预览pdf⽂件 pdf⽂件转好后，开始使⽤pdf.js插件对pdf⽂件进⾏在线预览操作 下载pdf.js插件，进⾏解压，进⼊解压后的⽬录 build/build/generic，generic中的⽬录，如下图所⽰进⼊web⽬录，找到viewer.js⽂件，打开，找到这⾏代码，这⾥是指定打开默认的pdf⽂件，在web⽬录中存在⼀个同名的pdf⽂件，这个就是默认打开的⽂件。
记录js的一个图片预览功能代码
记录js的⼀个图⽚预览功能代码1.图⽚预览层的样式：/* 图⽚预览弹出层样式 */html,body,div,img,button{margin:0;padding:0;box-sizing:border-box;}img{border:0;}#imgModule{display:none;}.imgItem{width:220px;height:220px;cursor: pointer;}.mask{background:#000;opacity:1;filter:alpha(opacity=80);position:absolute;left:0;top:0;width:100%;height:100%;}.lightBoxContent{width:350px;height:350px;position:absolute;left:50%;top:50%;background:#fff;margin:-170px 0 0 -180px;} #imgLoader{width:32px;height:32px;position:absolute;left:50%;top:50%;margin:-16px 0 0 -16px;display:none;}#imgLight{width:350px;height:350px;-webkit-animation:change 1s;animation:change 1s;}#imgModule .btn{width:40px;height:50px;position:absolute;top:50%;margin-top:-25px;cursor:pointer;}.lightBoxSprite{background-image:url(../images/imgIcons.png);background-repeat:no-repeat;}#lightBoxPrev{left:10px;background-position:2px center;}#lightBoxNext{right:10px;background-position:-42px center;}.closeBtn{width:35px;height:35px;background-position:-100px center;position:absolute;top:15px;right:15px;cursor:pointer;} .lightBoxPagination{position:absolute;left:0;bottom:50px;width:100%;text-align:center;}.lightBoxPagination span{display:inline-block;width:10px;height:10px;border:1px solid #fff;-webkit-border-radius:50%;border-radius:50%;margin-right:8px;}.lightBoxPagination span.current{background:#fff;}@keyframes change{0%{opacity:0;}100%{opacity:1;}}2.图⽚预览层的js⽂件var LightBox = function(options){this.imgListParent = document.getElementById(options.imgListParent); //图⽚列表的⽗元素this.imgItemClass = options.imgItemClass; //图⽚的classNamethis.idx = 0; //图⽚的索引，初始值为0this.isShowPage = options.isShowPage || false; //是否显⽰分页，默认不显⽰this.init();};//初始化LightBox.prototype.init = function(){this.renderDOM();this.imgListClick();this.nextBtnClick();this.prevBtnClick();this.closeBtnClick();this.keyDownEvent();};//渲染弹窗LightBox.prototype.renderDOM = function(){var imgModule = document.createElement("div");imgModule.id = "imgModule";var oHtml = "";oHtml += '<div class="mask"></div>';oHtml += '<div class="lightBox">';oHtml += '<div class="lightBoxContent">';oHtml += '<img src="avicit/mms/offlinedataqrcode/images/loading.gif" alt="" id="imgLoader">';oHtml += '<img alt="" id="imgLight">';oHtml += '</div>';oHtml += '<span class="btn lightBoxSprite" id="lightBoxPrev"></span>';oHtml += '<span class="btn lightBoxSprite" id="lightBoxNext"></span>';oHtml += '<span class="closeBtn lightBoxSprite" id="closeBtn"></span>';oHtml += '<div class="lightBoxPagination" id="lightBoxPagination"></div>';oHtml += '</div>';imgModule.innerHTML = oHtml;document.body.appendChild(imgModule);};//分页LightBox.prototype.pagination = function(idx){var imgList = this.getByClass(this.imgListParent, this.imgItemClass); var pagination = document.getElementById("lightBoxPagination"); var page = "";for(var i = 0; i < imgList.length; i++){if(idx == i){page += '<span class="current"></span>';}else{page += '<span></span>';}}if(this.isShowPage){pagination.innerHTML = page;}};//点击图⽚弹出弹窗LightBox.prototype.imgListClick = function(){var imgList = this.getByClass(this.imgListParent, this.imgItemClass); var imgModule = document.getElementById("imgModule");var self = this;for(var i = 0; i < imgList.length; i++){imgList[i].index = i;imgList[i].onclick = function(){imgModule.style.display = "block";var src = this.getAttribute("src");self.idx = this.index;self.imgLoad(src);self.pagination(self.idx);}}//self.keyDownEvent();};//上⼀张LightBox.prototype.prevBtnClick = function(){var prevBtn = document.getElementById("lightBoxPrev");var self = this;prevBtn.onclick = function(){var imgList = self.getByClass(self.imgListParent, self.imgItemClass); self.idx--;if(self.idx < 0){self.idx = imgList.length - 1;}var src = imgList[self.idx].getAttribute("src");self.imgLoad(src);self.pagination(self.idx);}};//下⼀张LightBox.prototype.nextBtnClick = function(){var nextBtn = document.getElementById("lightBoxNext");var self = this;nextBtn.onclick = function(){var imgList = self.getByClass(self.imgListParent, self.imgItemClass); self.idx++;if(self.idx >= imgList.length){self.idx = 0;}var src = imgList[self.idx].getAttribute("src");self.imgLoad(src);self.pagination(self.idx);}};//图⽚预加载LightBox.prototype.imgLoad = function(src, callback){var imgLight = document.getElementById("imgLight");var loader = document.getElementById("imgLoader");loader.style.display = "block";var img = new Image();img.onload = function(){loader.style.display = "none";imgLight.src = src;};img.src = src;};//关闭弹窗LightBox.prototype.closeBtnClick = function(){var closeBtn = document.getElementById("closeBtn");var imgModule = document.getElementById("imgModule"); closeBtn.onclick = function(){imgModule.style.display = "none";}};//封装获取元素函数LightBox.prototype.getByClass = function(oParent, oClass){var oEle = oParent.getElementsByTagName("*");var oResult = [];for(var i = 0; i < oEle.length; i++){if(oEle[i].className == oClass){oResult.push(oEle[i]);}}return oResult;};//封装获取元素函数LightBox.prototype.keyDownEvent = function(){var self = this;$(document).keydown(function(event){if($('#imgModule').is(':visible')){var e = event || window.event;var k = e.keyCode || e.which;switch(k) {case 37:var imgList = self.getByClass(self.imgListParent, self.imgItemClass); self.idx--;if(self.idx < 0){self.idx = imgList.length - 1;}var src = imgList[self.idx].getAttribute("src");self.imgLoad(src);self.pagination(self.idx);break;case 39:var imgList = self.getByClass(self.imgListParent, self.imgItemClass); self.idx++;if(self.idx >= imgList.length){self.idx = 0;}var src = imgList[self.idx].getAttribute("src");self.imgLoad(src);self.pagination(self.idx);break;}}return false;});};window.LightBox = LightBox;3.在使⽤页⾯引⽤上⾯的js和样式：在页⾯上初始化该组件$(function () {//创建图⽚预览对象lightBox = new LightBox({imgListParent: "imgDefault",//图⽚预览层所放置的div层的ID imgItemClass: "imgItem", //图⽚img标签上的样式标识isShowPage: true});});4.页⾯元素使⽤：<div id="imgDefault" style="overflow: auto;height: 99%;"><img class="imgItem" style="padding:10px" src="/image/test-1.jpg"/><img class="imgItem" style="padding:10px" src="/image/test-2.jpg"/><img class="imgItem" style="padding:10px" src="/image/test-3.jpg"/></div>5.这样在页⾯上点击上⾯的某个图⽚的时候，会弹出图⽚预览层，进⾏图⽚的预览。
JS中利用FileReader实现上传图片前本地预览功能
JS中利⽤FileReader实现上传图⽚前本地预览功能引⼦平时做图⽚上传预览时如果没有特殊的要求就直接先把图⽚传到后台去，成功之后拿到URL再渲染到页⾯上，这样做在图⽚⽐较⼩的时候没什么问题，⼤⼀点的话就会⽐较慢才能看到预览了，⽽且还产⽣了垃圾⽂件，所以⽐较好的是上传之前先在本地预览⼀下。
之前做项找插件的时候就知道纯前端可以实现图⽚本地预览，可今天⾯试的时候被问到时竟然⼀脸懵逼，然后竟然⽆意中就在电脑桌⾯发现了实现的demo，然后根据demo查了⼀下API，稍微总结下：⾸先得拿到File对象当⽤input标签上传图⽚时event对象中会包含file对象的⼀个集合event.target.files核⼼是FileReader对象根据MDN上的说法：FileReader 对象允许Web应⽤程序异步读取存储在⽤户计算机上的⽂件（或原始数据缓冲区）的内容,使⽤ File 或 Blob 对象指定要读取的⽂件或数据。
⾸先要作为构造函数得到⼀个FileReader的实例对象var freader = new FileReader();利⽤readAsDataURL()⽅法读取指定的内容freader.readAsDataURL(file);最后就是⼀个事件处理，相当于监控读取进度，我们这⾥是当读取完成时渲染图⽚，所以⽤onloadfreader.onload = function(e) { console.log(e); myImg.setAttribute('src', e.target.result); }这⾥架加载完成之后最终得到的是⼀个base64编码的src地址，具体为什么下次查清楚了再专门写篇关于base64编码的⽂章完整代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><form action=""><input type="file" name="files" id="fileTog" accept="image/*" multiple="multiple" onchange="changImg(event)"><img alt="暂⽆图⽚" id="myImg" src="" height="100px" width="100px"></form><script>function changImg(e){var myImg = document.getElementById('myImg');for (var i = 0; i < e.target.files.length; i++) {var file = e.target.files[i];console.log(file);if (!(/^image\/.*$/i.test(file.type))) {continue; //不是图⽚就跳出这⼀次循环}//实例化FileReader APIvar freader = new FileReader();freader.readAsDataURL(file);freader.onload = function(e) {console.log(e);myImg.setAttribute('src', e.target.result);}}}</script></body></html>后记通过这件事就暴露了我学习新东西的⼀个问题，就是查出来看⼀遍觉得知道了就⾏了，这种习惯是特别害⼈的，以后每当有个疑问查出来之后不仅要查是怎么做的，还要了解⼀下为什么可以这么做，所谓知其然知其所以然。
html+css+js实现拍照预览上传图片功能
html+css+js实现拍照预览上传图⽚功能前⾔：我们在做⽹页时经常会需要有上传图⽚的需求，可能是选择图⽚或者拍照上传，如果简单的使⽤<input type="file"/>这种⽅式虽然也能实现功能，但⽤户体验上可能会差了⼀些，所以本⽂记录了使⽤css+js实现图⽚选中后的预览及压缩上传功能，部分带来来源于⽹络，此处做了记录整理。
效果预览：1.创建index.html<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>拍照上传</title><link rel="stylesheet" href="index.css"/><script type='text/javascript' src='index.js' charset='utf-8'></script></head><body><form id="mainForm"><div class="content"><div class="label">⾝份证</div><div class="img-area"><div class="container"><input type="file" id='id-face' name='face' accept="image/*" /><div id='face-empty-result'><img style='width:4rem' src="https:///wangheng3751/my-resources/blob/master/images/camera.png?raw=true" alt=""><p>⾝份证正⾯照</p></div><img style='width: 100%' id='face-result'/></div><div class="container" style='margin-top:0.5rem;'><input type="file" id='id-back' name='back' accept="image/*" /><div id='back-empty-result'><img style='width:4rem' src="https:///wangheng3751/my-resources/blob/master/images/camera.png?raw=true" alt=""><p>⾝份证反⾯照</p></div><img style='width: 100%' id='back-result'/></div></div></div><div class="btn">提交</div></form></body></html>2.创建index.cssbody{margin: 0}.content{padding:0.5rem;display: flex;align-items: center;border-bottom: 1px #999 solid}.label{width:5rem;}.img-area{flex:1}.container{background-color:#e7e7e7;position: relative;}.container div{text-align: center;padding:0.5rem 0}.container input{opacity:0;filter:alpha(opacity=0);height: 100%;width: 100%;position: absolute;top: 0;left: 0;z-index: 9;}.container p{font-size: 0.9rem;color:#999}.btn{background-color: #4363ab;color: #fff;text-align: center;padding: 0.5rem 1rem;width:80%;border-radius: 0.2rem;margin: 2rem auto;font-weight: 600;font-size: 1.2rem}3.创建index.jswindow.onload=function(){document.getElementById("id-face").addEventListener("change", function(){onFileChange(this,"face-result","face-empty-result")});document.getElementById("id-back").addEventListener("change", function(){onFileChange(this,"back-result","back-empty-result")});document.getElementsByClassName("btn")[0].addEventListener("click", function(){ submit();});};/*** 选中图⽚时的处理* @param {*} fileObj input file元素* @param {*} el //选中后⽤于显⽰图⽚的元素ID* @param {*} btnel //未选中图⽚时显⽰的按钮区域ID*/function onFileChange(fileObj,el,btnel){var windowURL = window.URL || window.webkitURL;var dataURL;var imgObj = document.getElementById(el);document.getElementById(btnel).style.display="none";imgObj.style.display="block";if (fileObj && fileObj.files && fileObj.files[0]) {dataURL = windowURL.createObjectURL(fileObj.files[0]);imgObj.src=dataURL;} else {dataURL = fileObj.value;imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;}}/*** 将图⽚压缩后返回base64格式的数据* @param {*} image img元素* @param {*} width 压缩后图⽚宽度* @param {*} height 压缩后图⽚⾼度* @param {*} qua //图⽚质量1-100*/function compressImageTobase64(image,width,height,qua){var quality = qua ? qua / 100 : 0.8;var canvas = document.createElement("canvas"),ctx = canvas.getContext('2d');var w = image.naturalWidth,h = image.naturalHeight;canvas.width = width||w;canvas.height = height||h;ctx.drawImage(image, 0, 0, w, h, 0, 0, width||w, height||h);var data = canvas.toDataURL("image/jpeg", quality);return data;}//提交function submit(){//1、form提交//document.getElementById("mainForm").submit();//2、压缩后ajax提交var face_data=compressImageTobase64(document.getElementById("face-result"),200,100,90);var back_data=compressImageTobase64(document.getElementById("back-result"),200,100,90);var formData = new FormData();formData.append("face",face_data);formData.append("back",back_data);//需引⼊jQuery$.ajax({url:"/地址",type: 'POST',cache: false,data: formData,timeout:180000,processData: false,contentType: false,success:function(r){},error:function(r){}});}源码：总结以上所述是⼩编给⼤家介绍的html+css+js 实现拍照预览上传图⽚功能，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。
javascript和HTML5上传图片之前实现预览效果
javascript和HTML5上传图⽚之前实现预览效果⼀：FileList对象与file对象FileList对象表⽰⽤户选择的⽂件列表，在HTML4中，file控件内只允许放置⼀个⽂件，但是到了HTML5中，通过添加multiple属性，file控件内允许⼀次放置多个⽂件，控件内的每⼀个⽤户选择的⽂件都是⼀个file对象，⽽FileList对象是file对象的列表；⽐如如下代码：选择⽂件<input type="file" id="file" multiple size="80"/><input type="button" onclick="ShowFileName();" value="⽂件上传"/>我们可以按住ctrl键选择多个⽂件；JS代码如下：function ShowFileName() {var files = document.getElementById("file").files;for(var i = 0; i < files.length; i+=1) {var file = files[i];console.log(file);console.log();}}我们先打印下file对象有哪些属性，在safari截图如下：如上图可以看到有⽂件名(name)属性，⽂件⼤⼩(size)属性，最后修改时间，还有type属性等；⼆：Blob对象在HTML5中，新增⼀个Blob对象，代表原始⼆进制数据，我们上⾯提到的file对象也继承了这个Blob对象；Blob对象有2个属性，size属性表⽰⼀个Blob对象的字节长度，type属性表⽰Blob的MIME类型，如果是未知类型，则返回⼀个空字符串。
如下代码：选择⽂件<input type="file" id="file" multiple size="80" accept="image/*"/><input type="button" onclick="ShowFileType();" value="显⽰⽂件信息"/>⽂件字节长度:<span id="size"></span><br/>⽂件类型:<span id="type"></span>JS代码如下：function ShowFileType() {var file = document.getElementById("file").files[0];var size = document.getElementById("size");var type = document.getElementById("type");// 显⽰⽂件字节长度size.innerHTML = file.size;// 显⽰⽂件类型type.innerHTML = file.type;console.log(file);}我们打印出file，如下图所⽰：三：FileReader对象FileReader对象有5种⽅法，其中四种⽤于读取⽂件，另⼀种⽤来读取过程中断，需要注意的是：⽆论读取成功与失败，⽅法并不会返回读取结果，⽽是将结果保存在result属性中。
js实现上传图片功能
js实现上传图⽚功能前端上传图⽚的原理是：运⽤input type=“file”的标签获取图⽚，再使⽤FileReader这个对象 new ⼀个实例，通过这个对象的readAsDataURL()⽅法读取file标签获取的图⽚并转换为base64格式，完成之后通过ajax之类的⽅式传到后台。
HTML需要⼀个input type="file" 的标签如果需要预览的话可以再加⼀个img标签<div class="warp"><div class="warp-content">点击上传</div><input type="file" id="file" /></div><img src="" />JS⼀、图⽚上传需要检测上传的图⽚是否变化，所以这⾥选择js的onchange事件.先获取input,img的dom元素,在inputtype=‘file'的demo元素下，有⼀个files属性，⾥⾯是我们上传的⽂件信息，打印⼀下，就可以看到上传⽂件的名字，类型等信息。
var file = document.getElementById('file');var image = document.querySelector("img");file.onchange = function() {var fileData = this.files[0];//这是我们上传的⽂件}⼆、然后运⽤ FileReader 这个对象，FileReader主要⽤于将⽂件内容读⼊内存，通过⼀系列异步接⼝，可以在主线程中访问本地⽂件。
使⽤FileReader对象，web应⽤程序可以异步的读取存储在⽤户计算机上的⽂件(或者原始数据缓冲)内容，可以使⽤File对象或者Blob对象来指定所要处理的⽂件或数据。
Extjs图片上传预览
// 图片上传预览var fileForm = new Ext.form.FormPanel({title : "",fileUpload : true,layout : "form",id : "fileUploadForm",border:false,items : [{id : 'upload',name : 'upload',inputType : "file",fieldLabel : '上传图片',// labelSeparator:'',xtype : 'textfield',anchor : '40%'}, {xtype : 'box',width : 200,height : 300,name : 'pic',id:'pic_div',hidden:true,autoEl : {tag : 'div',style:'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);width:174px;height:227px; text-align:center'},listeners : { // 该项被载入时加载照片'render' : function(_filed) {//_filed.getEl().dom.src = Ext.getCmp('upload').getValue();//这里图片的路径可以预先从store中读取，赋给变量然后给它}}},{xtype : 'box',width : 300,height : 300,name : 'pic',id:'pic_img',style:'display:block',autoEl : {tag : 'img'},listeners : { // 该项被载入时加载照片'render' : function(_filed) {// _filed.getEl().dom.src = Ext.getCmp('photoUrl').getValue();//这里图片的路径可以预先从store中读取，赋给变量然后给它}}},addLayout(addLabelText("text","\t建议：为了避免影响系统性能请不要使用较大(>=2M)图片","color:red"))],//form事件listeners : {'render' : function(f) {this.form.findField('upload').on('render', function() {//通過change事件,图片也动态跟踪选择的图片变化Ext.get('upload').on('change',function(field, newValue, oldValue) {var imagePathCmp = Ext.get('upload');if (Ext.isIE) {//IE浏览器Ext.getCmp("pic_div").show();Ext.getCmp("pic_img").hide();document.getElementById("pic_div").filters.item("DXImageTransform.Microsoft.AlphaImageLo ader").src = "file://"+imagePathCmp.getValue(); // document.selection.createRange().text;}else{//Firefox浏览器// Ext.getCmp("pic_div").hide();Ext.getCmp("pic_img").show();//console.log(Ext.getCmp("pic_img").getEl().dom.src);Ext.getCmp("pic_img").getEl().dom.src=window.URL.createObjectURL(document.getElementById('upload').files[0]);//console.log(document.getElementById('upload').files[0]);//console.log(Ext.getCmp("pic_img").getEl().dom.src);}//var picturePath = imagePathCmp.getValue();//上传的后缀名var idx = stIndexOf(".");var docObj = document.getElementById("upload");var size = document.getElementById('upload').files[0].size;var fileName = docObj.value;// console.log('doc');// console.log(docObj);// console.log(fileName);//console.log(!fileName.match(/.jpg|.gif|.png|.bmp/i));if(!fileName.match(/.jpg|.gif|.png|.bmp|.ico/i)){Ext.Msg.alert('提示', '请上传正确的图片类型(.jpg,.gif,.png,.bmp)!');}/*if (idx != -1){var ext = picturePath.substr(idx+1).toUpperCase();ext = ext.toLowerCase( );//判断是不是一般的图片类型if (ext != 'jpg' && ext != 'gif' && ext !='bmp'){Ext.Msg.alert('提示', '请上传正确的图片类型(.jpg,.gif,.bmp,.png)！');// Ext.getCmp('pic').setValue(null);//把图片显示设为默认的return;}}*/});});}},buttons : [{text : "更换图片",name : "submit",handler : submit},{text: '重置',handler: function(){fileForm.getForm().reset();if(Ext.getCmp("pic_img"))Ext.getCmp("pic_img").getEl().dom.src='';if(Ext.getCmp("pic_div"))Ext.getCmp("pic_div").getEl().dom.src='';}}]});function submit() { //此处提交最好使用ajax请求,否则会只提交一次Ext.getCmp("fileUploadForm").getForm().submit({url : url,method : "POST",// waitMsg:"图片上传中，请稍等....", success : function(form, action) {alert("success");},failure : function(form, action) {alert("failure");}});}。
javascript上传图片前预览图片兼容大多数浏览器
上传图片前预览图片这种效果应用比较广泛，实现的方也大同小异，下面为大家介绍下，在javascript中是如何实现的，感兴趣的朋友可以参考下代码如下:<div id="localImag"><img id="preview" width="-1" height="-1" style="display:none" /></div><asp:FileUpload ID="file_head" runat="server" onchange="javascript:setImagePreview();" />代码如下:<script type="text/javascript">function setImagePreview() {var docObj = document.getElementById("ctl00_ContentMain_file_head");var fileName = docObj.value;if (!fileName.match(/.jpg|.gif|.png|.bmp/i)) {alert('您上传的图片格式不正确，请重新选择！');return false;}var imgObjPreview = document.getElementById("preview");if (docObj.files && docObj.files[0]) {//火狐下，直接设img属性imgObjPreview.style.display = 'block';imgObjPreview.style.width = '63px';imgObjPreview.style.height = '63px';//imgObjPreview.src = docObj.files[0].getAsDataURL();if (erAgent.indexOf("Chrome") >= 1 || erAgent.indexOf("Safari") >= 1) {imgObjPreview.src = window.webkitURL.createObjectURL(docObj.files[0]);}else {imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);}} else {//IE下，使用滤镜docObj.select();docObj.blur();var imgSrc = document.selection.createRange().text;var localImagId = document.getElementById("localImag");//必须设置初始大小localImagId.style.width = "63px";localImagId.style.height = "63px";//图片异常的捕捉，防止用户修改后缀来伪造图片try {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;}</script>此js解决360浏览器显示图片问题。
js前端实现多图图片上传预览的两个方法（推荐）
js前端实现多图图⽚上传预览的两个⽅法（推荐）⼀、将图⽚转成icon码的实现⽅式html代码：<div class="yanzRight"><input style="margin-top:5px;float: left;" id="st18" name="evidence" onchange="previewImage(this,5)" type="file"/><span class="dui" id="imgOrder_dui" style="display: none;"></span></div><div id="preview5" style="margin-left:150px;clear:both; padding-top:15px;"><img src="" alt="" id="imghead5" height="200" width="200" style="display:none;"/></div>js代码//图⽚预览功能function previewImage(file,imgNum){var MAXWIDTH = 200;var MAXHEIGHT = 200;var div = document.getElementById('preview'+imgNum);if (file.files && file.files[0]){div.innerHTML ='<img id=imghead'+imgNum+'>';var img = document.getElementById('imghead'+imgNum+'');img.onload = function(){var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);img.width = rect.width;img.height = rect.height;// img.style.marginLeft = rect.left+'px';img.style.marginTop = rect.top+'px';}var reader = new FileReader();reader.onload = function(evt){img.src = evt.target.result;}reader.readAsDataURL(file.files[0]);}else //{var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';file.select();var src = document.selection.createRange().text;div.innerHTML = '<img id=imghead'+imgNum+'>';var img = document.getElementById('imghead2');img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);div.innerHTML = "<div id=divhead"+imgNum+" style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>"; }}function clacImgZoomParam( maxWidth, maxHeight, width, height ){var param = {top:0, left:0, width:width, height:height};if( width>maxWidth || height>maxHeight ){rateWidth = width / maxWidth;rateHeight = height / maxHeight;if( rateWidth > rateHeight ){param.width = maxWidth;param.height = Math.round(height / rateWidth);}else{param.width = Math.round(width / rateHeight);param.height = maxHeight;}}param.left = Math.round((maxWidth - param.width) / 2);param.top = Math.round((maxHeight - param.height) / 2);return param;}⼆、使⽤js的另⼀种⽅法⼀次选中多个图⽚预览展⽰<html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>测试页⾯</title><script type="text/javascript">//下⾯⽤于多图⽚上传预览功能function setImagePreviews(avalue) {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 style='float:left' > <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 = '150px';imgObjPreview.style.height = '180px';//imgObjPreview.src = docObj.files[0].getAsDataURL();//⽕狐7以上版本不能⽤上⾯的getAsDataURL()⽅式获取，需要⼀下⽅式imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);}else {//IE下，使⽤滤镜docObj.select();var imgSrc = document.selection.createRange().text;alert(imgSrc)var localImagId = document.getElementById("img" + i);//必须设置初始⼤⼩localImagId.style.width = "150px";localImagId.style.height = "180px";//图⽚异常的捕捉，防⽌⽤户修改后缀来伪造图⽚try {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;}</script></head><body><div style="margin :0px auto; width:990px;"><input type="file" name="file" id="doc" multiple="multiple" style="width:150px;" onchange="javascript:setImagePreviews();" accept="image/*" /><div id="dd" style=" width:990px;"></div></div></body></html>以上这篇js前端实现多图图⽚上传预览的两个⽅法(推荐)就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
vue.js图片上传并预览及图片更换功能的实现代码
vue.js图⽚上传并预览及图⽚更换功能的实现代码这⾥讲解是图⽚上传和图⽚预览。
主要是围绕我们常⽤功能的列⼦做讲解 ,并且没有格外引⼊其他js 所以你复制过去做简单修改便可以看到效果效果图：样式以及效果图⼀并展⽰1.HTML<div class="rz-picter"><img :src="avatar" class="img-avatar"><input type="file" name="avatar" id="uppic" accept="image/gif,image/jpeg,image/jpg,image/png" @change="changeImage($event)" ref="avatarInput" class="uppic"></div>2.jsdata() {return {avatar: require('../assets/jia.jpg'),}},图⽚⼀定要以require 的⽅式引⼊这⾥的图⽚仅⽤来美化并不是上传的图⽚3.js 写⽅法changeImage(e) {var file = e.target.files[0]var reader = new FileReader()var that = thisreader.readAsDataURL(file)reader.onload = function(e) {that.avatar = this.result}},就这么⼏段代码⼀个上传功能就写好了4.切记我这⾥⽤了css来将input type = file 的样式重新优化了，并且将图⽚做了定位所以点击中间图⽚就可以触发上传你需要你的需求去定义你的样式5.运⽤原⽣javascript我做了⼀个判断图⽚是否上传的的判断if(document.getElementById('uppic').value.length == '') {Toast('请上传图⽚');return}6.附上css代码.uppic {height: 3rem;width: 6rem;margin: 0 auto;opacity: 0;z-index: 99999;}.img-avatar {position: absolute;}附上写此功能所有代码<template><div class="renzheng"><div class="rz-notice" v-bind:style="{ display: isno}"><p>名⽚⽤来鉴别是相关⼈员，温馨提⽰：<img src="../assets/static/img-icon/lan_cha.png" @click="hiddenwords"></p></div><van-tabs v-model="active" swipeable><van-tab v-for="(item,index) in navArr" :title="" class="v-tab"><div v-if="index==0"><div class="color-black" style="text-align: center;margin-top: 0.4rem;">请上传本⼈名⽚照⽚</div><div class="rz-picter"><img :src="avatar" class="img-avatar"><input type="file" name="avatar" id="uppic" accept="image/gif,image/jpeg,image/jpg,image/png" @change="changeImage($event)" ref="avatarInput" class="uppic"></div><div class="cuxian"></div><div class="my-content-list"><div class="color-black"><span style="margin-right: 0.6rem;">真实姓名:</span><input v-model="yoursname" placeholder="请输⼊您的真实姓名" /></div></div><div class="my-content-list"><div class="color-black"><span style="margin-right: 0.6rem;">⼿机号码:</span><input type="number" max="11" v-model="yoursphone" placeholder="请输⼊您的⼿机号码" /></div> </div><div class="yzbtn" @click="submitBtn">⽴即认证</div></div><div v-if="index==1"><div class="color-black" style="text-align: center;margin-top: 0.4rem;">请上传本⼈⾝份证照⽚</div><div class="rz-picter"><img src="../assets/jia.jpg" /><p>上传⼈像页</p></div><div class="rz-picter"><img src="../assets/jia.jpg" /><p>上传国辉页</p></div><div class="cuxian"></div><div class="my-content-list"><div class="color-black"><span style="margin-right: 0.6rem;">真实姓名:</span><input placeholder="请输⼊您的真实姓名" /></div></div><div class="my-content-list"><div class="color-black"><span style="margin-right: 0.6rem;">⼿机号码:</span><input type="number" placeholder="请输⼊您的⼿机号码" /></div></div><div class="yzbtn">⽴即认证</div></div></van-tab></van-tabs></div></template><script>import { Tab, Tabs } from 'vant';import { Toast } from 'vant'export default {name: 'renzheng',data() {return {yoursname: '',yoursphone: '',avatar: require('../assets/jia.jpg'),isno: 'block',active: 0,navArr: [{name: "⾝份认证"},{name: "实名认证"}],}},methods: {hiddenwords() {this.isno = 'none'},submitBtn() {if(this.yoursname == '') {Toast("请填写你的真实姓名");return;}if(this.yoursphone == '' || this.yoursphone == null) {Toast("请填写你的⼿机号码");return;}if(document.getElementById('uppic').value.length == '') { Toast('请上传图⽚');return;}},changeImage(e) {var file = e.target.files[0]var reader = new FileReader()var that = thisreader.readAsDataURL(file)reader.onload = function(e) {that.avatar = this.result}},},mounted: function() {}}</script><style>.rz-notice {padding: 0.2rem 0.3rem;display: flex;flex-direction: row;justify-content: space-between;align-items: center;background: #F0F5FB;color: #28D9EF;}.rz-notice img {height: 0.22rem;width: 0.22rem;}.rz-picter {height: 3rem;width: 6rem;margin: 0.3rem auto;border: 0.01rem solid #ededed;display: flex;flex-direction: column;align-items: center;justify-content: center;}.uppic {height: 3rem;width: 6rem;margin: 0 auto;opacity: 0;z-index: 99999;}.img-avatar {position: absolute;}/*⽴即验证*/.yzbtn {width: 90%;height: 0.8rem;background: #FF6600;border-radius: 0.06rem;margin: 30px auto;text-align: center;line-height: 0.8rem;color: #FFFFFF}/*修改原有tab样式*/.van-tab {color: #A3A3A3!important;}.van-tab--active {color: #000!important;}.van-tabs__line {background-color: #FF6600!important;width: 0.7rem!important;text-align: center!important;align-items: center;margin-left: 1.5rem;}.van-toast {background-color: #FF6600;color: #FFFFFF}.my-content-list {padding: 0.3rem;display: flex;flex-direction: row;justify-content: space-between;border-bottom: 0.01rem solid #EDEDED;}</style>总结以上所述是⼩编给⼤家介绍的vue.js 图⽚上传并预览及图⽚更换功能的实现代码，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。
JS实现上传图片的三种方法并实现预览图片功能
JS实现上传图⽚的三种⽅法并实现预览图⽚功能在常见的⽤户注册页⾯，需要⽤户在本地选择⼀张图⽚作为头像，并同时预览。
常见的思路有两种：⼀是将图⽚上传⾄服务器的临时⽂件夹中，并返回该图⽚的url，然后渲染在html页⾯；另⼀种思路是，直接在本地内存中预览图⽚，⽤户确认提交后再上传⾄服务器保存。
这两种⽅法各有利弊，⽅法⼀很明显，浪费流量和服务器资源；⽅法⼆则加重了浏览器的负担，并且对浏览器的兼容性要求更⾼（在某些低版本中的IE浏览器不⽀持）。
以下是实现上述思路的⽅法：1. 模板⽂件<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div style="margin-left: 30px; margin-top: 30px"><form action="">{% csrf_token %}<h3>⽤户注册</h3><p>⽤户名：<input type="text" name="userName"></p><p>密码：<input type="password" name="password"></p><p>邮箱：<input type="text" name="email"></p><input id="avatar" type="text" value="/static/images/sample.png" name="avatar" style="width: 400px"> {# 实际应⽤中要将该input标签隐藏，display:none; #} <p><input type="submit" value="注册"></p></form><div style="position: absolute; top: 85px; left: 300px;"><input id="avatarSlect" type="file" style="position: absolute;float: left; z-index: 10; opacity: 0;width: 100px; height: 100px;"><img id="avatarPreview" src="/static/images/sample.png" title="点击更换图⽚" style="position: absolute; z-index: 9; float: left; width: 100px; height: 100px"> </div></div></body><script src="/static/jquery-3.2.1.js"></script><script>$(function () {bindAvatar();});function bindAvatar() {if(window.URL.createObjectURL){bindAvatar3();}else if(window.FileReader){bindAvatar2();}else {bindAvatar1();}}/*Ajax上传⾄后台并返回图⽚的url*/function bindAvatar1() {$("#avatarSlect").change(function () {var csrf = $("input[name='csrfmiddlewaretoken']").val();var formData=new FormData();formData.append("csrfmiddlewaretoken",csrf);formData.append('avatar', $("#avatarSlect")[0].files[0]); /*获取上传的图⽚对象*/$.ajax({url: '/upload_avatar/',type: 'POST',data: formData,contentType: false,processData: false,success: function (args) {console.log(args); /*服务器端的图⽚地址*/$("#avatarPreview").attr('src','/'+args); /*预览图⽚*/$("#avatar").val('/'+args); /*将服务端的图⽚url赋值给form表单的隐藏input标签*/}})})}/*window.FileReader本地预览*/function bindAvatar2() {console.log(2);$("#avatarSlect").change(function () {var obj=$("#avatarSlect")[0].files[0];var fr=new FileReader();fr.onload=function () {$("#avatarPreview").attr('src',this.result);console.log(this.result);$("#avatar").val(this.result);};fr.readAsDataURL(obj);})}/*window.URL.createObjectURL本地预览*/function bindAvatar3() {console.log(3);$("#avatarSlect").change(function () {var obj=$("#avatarSlect")[0].files[0];var wuc=window.URL.createObjectURL(obj);$("#avatarPreview").attr('src',wuc);$("#avatar").val(wuc);{# $("#avatarPreview").load(function () {#} /*当图⽚加载后释放内存空间，但在jQuery3.2.1中会报错。
JSP图片上传无刷新实现预览
JSP图片上传无刷新实现预览最近项目开发中，需要进行图片上传，同时实现无刷新图片预览功能，通过搜索，发现有很多插件比如jquery的uploadify可以实现这个功能，如果不使用插件，可以使用iframe框架方式来实现无刷新图片预览：(1)在jsp页面使用form表单构建页面图片上传界面：[html]view plaincopy1.<div id="sendImageDiv" style="width: 100%; height: 205 px;border:0px solid yellow">2.<form action="<%=basePath%>lib/kindeditor/jsp/uploa d_json.jsp" method="post" enctype="multipart/form-data" target="hidden_frame_name">3.<div style="margin-top:50px;margin-left:200px;font-size: 12px;font-family: ''Microsoft YaHei', Helvetica, Verdana, Arial, Tahoma;">注:图片大小最大不能超过1M! </div>4.<div style="margin-top:10px;margin-left:200px;font-size: 12px;font-family: 'Microsoft YaHei', Helvetica, Verdana, Arial, Tahoma;"><i nput type="file" name="file"/></div>5.<div style="margin-top:10px;margin-left:200px;font-size: 12px;font-family: 'Microsoft YaHei', Helvetica, Verdana, Arial, Tahoma;"><i nput type="submit" value="上传"/></div>6.</form>7.</div>8.<iframe name='hidden_frame_name' id="hidden_frame_i d" style="display:none"></iframe>form的target属性指向子框架iframe，属性名与iframe框架名相同(2)构建后台action，处理form表单提交的文件上传处理,将获取到的图片路径通过out输出，具体的图片路径以及其他信息可以通过JSONObject保存，然后页面通过JS进行JSON的获取：[html]view plaincopy1.JSONObject obj = new JSONObject();2.obj.put("error", 0);3.obj.put("url", saveUrl + newFileName);4.String guid = UUIDGenerator.getGuid();5.out.println(obj.toJSONString());6.out.println("<script>window.parent.imagePreview('" + ob j.toJSONString() +"', '" + guid + "')</script>");由于form表单实现了target定向，因此action处理文件上传之后，out输出的内容是保存在iframe子框架中。
JSHTML5拖拽上传图片预览
JSHTML5拖拽上传图⽚预览本⽂实例为⼤家分享了JS HTML5拖拽上传图⽚预览的具体代码，供⼤家参考，具体内容如下1.⽂件API：（File API）file类型的的表单控件选择的每⼀个⽂件都是⼀个file对象，⽽FileList对象则是这些file对象的集合列表，代表所选择的所有⽂件。
file对象继承于Blob 对象，该对象表⽰⼆进制原始数据，提供slice⽅法，可以访问到字节内部的原始数据块。
总之，file对象包含与FlieList对象，⽽file对象继承于Blob 对象！各对象的相关属性关系：FileReader接⼝：由图可知：HTML5还提供了FileReader接⼝：⽤于将⽂件读⼊内存，并读取⽂件中的数据。
var reader=new FileReader();该接⼝总共有四个⽅法和六个事件：•readAsBinaryString(file):读取⽂件为⼆进制•readAsDataURL(file):读取⽂件DataURL•readAsText(file,[encoding])：读取⽂件为⽂本•about(none)：中断⽂件读取--------------------------------------------------------------------------------•onabort：读取⽂件中断时触发•onerror：读取⽂件出错时触发•onloadstart：读取⽂件开始时触发•onprogress：读取⽂件中时⼀直触发•onload：读取⽂件成功时触发•onloadend：读取⽂件结束时触发（成功和失败都会触发）以上事件参数e有e.target.result或this.result指向读取的结果！2.拖放API：拖放属性：将需要拖放的元素的dragable属性设置为true（dragable=”true”）!img元素和a元素默认可以拖放。
拖放事件：（分为拖放元素事件和⽬标元素事件）拖放元素事件：•dragstart:拖拽前触发•drag ,拖拽前、拖拽结束之间，连续触发•dragend , 拖拽结束触发⽬标元素事件：•dragenter , 进⼊⽬标元素触发•dragover ,进⼊⽬标、离开⽬标之间，连续触发•dragleave , 离开⽬标元素触发•drop , 在⽬标元素上释放⿏标触发但是！需要注意的是：在⽬标元素中dragover和drop事件中要阻⽌默认⾏为（拒绝被拖放），否则拖放不能被实现！-----------------------------DataTransfer对象：专门⽤于存放拖放时要携带的数据，可以被设置为拖放事件的dataTransfer属性。
JavaScript 图片上传预览效果
JavaScript 图片上传预览效果图片上传预览是一种在图片上传之前对图片进行本地预览的技术。
使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验。
但随着浏览器安全性的提高，要实现图片上传预览也越来越困难。
不过群众的智慧是无限的，网上已经有很多变通或先进的方法来实现。
例如ie7/ie8的滤镜预览法，firefox 3的getAsDataURL方法。
但在opera、safari和chrome还是没有办法实现本地预览，只能通过后台来支持预览。
在研究了各种预览方法后，作为总结，写了这个程序，跟大家一起分享。
上次写的简便无刷新文件上传系统最初的目的就是用来实现这个图片预览效果的。
兼容：ie6/7/8, firefox 3.5.5后台支持下还兼容：opera 10.10, safari 4.0.4, chrome 3.0效果预览ps：兼容opera, safari和chrome需要后台支持，请下载实例测试。
程序说明【基本原理】图片预览主要包括两个部分：从file表单控件获取图像数据，根据数据显示预览图像。
程序的file和img属性就是用来保存file控件和显示预览图像的容器的，而img还必须是img元素。
程序有以下几种预览方式：simple模式：直接从file的value获取图片路径来显示预览，适用于ie6；filter模式：通过selection获取file的图片路径，再用滤镜来显示预览，适用于ie7/8；domfile模式：调用file的getAsDataURL方法获取Data URI数据来显示预览，适用于ff3；remote模式：最后的办法，把file提交后台处理后返回图片数据来显示预览，全适用。
程序定义时就自动根据浏览器设置MODE属性：ImagePreview.MODE = $$B.ie7 || $$B.ie8 ? "filter" :$$B.firefox ? "domfile" :$$B.opera || $$B.chrome || $$B.safari ? "remote" : "simple";如果用能力检测会比较麻烦，所以只用了浏览器检测。
js上传图片预览效果（兼容IE，Firefox等浏览器）
js上传图片预览效果（兼容IE，Firefox等浏览器）参考了网络上相关文章，兼容个多浏览器，补充了使用框架时ie 取不到路径的解决方法。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>上传文件</title><style type="text/css">#imgView{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(si zingMethod=image);}</style><script type="text/javascript">var allowExtention = ".jpg,.bmp,.gif,.png"; //,图片允许上传文件的后缀名function PreviewImage(obj, imgPreviewId, divPreviewId) {var extention = obj.value.substring(stIndexOf(".") + 1).toLowerCase();var browserVersion = erAgent.toUpperCase();if (allowExtention.indexOf(extention) > -1) {document.getElementById(divPreviewId).style.display="";if (browserVersion.indexOf("MSIE") > -1) {if (browserVersion.indexOf("MSIE 6.0") > -1) {//ie6document.getElementById(imgPreviewId).setAttribute("src",obj.value);} else {//ie[7-8]、ie9以上obj.select();obj.blur();var src = document.selection.createRange().text;var div = document.getElementById('divNewPreview');if(src==""){/* 如果当前页面放到框架如iframe里面，则在ie下src依然取到空值，因为obj.blur()之后，file控件中原本被选中的文本将会失去选中的状态，因此，不能使用obj.blur()。
JAVA jsp任意浏览器的图片上传预览
} success = true; // 如果用的是 struct2 那么 下面 就可以省了，直接 写一个 json 格式 返 回 ，在 页面 json 接收 就好了 比这个 省事！
Document document = DocumentHelper.createDocument(); Element result = document.addElement("Result"); Element succ = result.addElement("Success"); Element fileN = result.addElement("FileName"); succ.addText(success.toString()); fileN.addText(fileName); StringWriter stringWriter = new StringWriter();
开始做的满足了firefox35可是36不行40不行还要判断ie后来改到firefox353640ie都适应了可是最后用户用来safari浏览器又要改safarioperachrome这样的浏览非要后台才能支持的所以只要通过选择图片的时候来个异步上传写到服务器的一个临时目录下返回图片路径显示在img标签里面这个过程也是非常快的就跟本地预览一样的效果没有半点延迟的效果除非你的服务器配置和网络非常差
1.做对任意浏览器的本地预览的功能是不可能实现的 光是适应 IE 与 firefox 两个 浏览 器 就是 不太可能的，IE 6 与 IE 7 8 不同，IE 9 又
是一个样，firefox 3.5 与 3.6 还有 4.0 往上走的版本都不一样。 开始做的 满足了 firefox3.5 ，可是 3.6 不行，4.0 不行，还要判断 IE，后来 改到 适
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
js实现图片上传前的预览,实现完美兼容Firefox3,IE6,IE7,IE8和IE9的显示问题
1、脚本，把下面代码加到<head>与</head>之间
Js代码
1.<script type="text/javascript" language="javascript">
2.function PreviewImg(imgFile){
3.document.getElementById("idImg").style.display = "none";//隐藏初
始化图片的显示,让过滤器显示
4.var newPreview=document.getElementById("newPreview");
5.remove(newPreview);
6.
7.var imgDiv=document.createElement("div");
8.document.body.appendChild(imgDiv);
9.imgDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaIma
geLoader(sizingMethod=scale)";
10.imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoade
r").src=imgFile.target.value;
11.var img_object =
document.getElementById("engineroom_layout_addr");
12.img_object.style.display = "inline";
13.img_object.src = addrObject.value;
14.if (!img_object.width || img_object.width > 300) {
15.imgDiv.style.width = "300px";
16.}
17.if (!img_object.height || img_object.height > 200) {
18.imgDiv.style.height = "200px";
19.}
20.addrObject.style.display = "none";
21.//imgDiv.style.width="320px";
22.//imgDiv.style.height="127px";
23.newPreview.appendChild(imgDiv);
24.
25.}
26.//使用removeChild从文档中删除DOM节点
27.function remove(obj) {
28.var test = obj;
29.var children = test.childNodes;
30.for (i = 0; i < children.length; i++) {
31.test.removeChild(children[i]);
32.}
33.}
34.</script>
2、在页面中添加DIV层来展示，IE9默认不显示预览，可参考title的说明设置
HTML页面代码：
Html代码
1.<div style="padding:5px;margin-left: -5px">
2.<table border="0"
style="width:94%;border-collapse:collapse;background:#fff;"
title="无显示帮助：第一步：工具-- Internet选项-- 安全-- 自定义级别;第二步：向下拖，一直看到“将文件上载到服务器时包含本地目录路径”;第三步：选择启用。
">
3.<tr>
4.<th style="background-color:#f0f0f0;
height:20px;padding:5px;border:1px solid #ccc;font-weight:
bolder;text-align: center;" width="40%">选择图片</th>
5.<th style="background-color:#f0f0f0;
height:20px;padding:5px;border:1px solid #ccc;font-weight:
bolder;text-align: center;" width="70%">预览图</th>
6.</tr>
7.<tr>
8.<td style="padding:5px;border:1px solid #ccc;"><INPUT
id=engineroom_layout_addr class=inputbox
name=engineroom_layout_addr/></td>
9.<td align="center" style="padding:5px;border:1px solid
#ccc;"><img id="idImg" style="display:none"/><div
id="newPreview"></div></td>
10.</tr>
11.</table>
12.<script type="text/javascript">
13.var addrObject =
document.getElementById("engineroom_layout_addr");
14.addrObject.style.display = "none";//把机房显示输入框隐藏
15.Ext.get('file_engineroom_layout_addr').on('change',function(obj
){
16.//crmsUtil.previewImg(obj.target,"idImg",300,200);//只适用于
IE6
17.PreviewImg(obj);
18.});
19.if(addrObject.value != ''){
20.var img_object = document.getElementById("idImg");
21.img_object.style.display = "inline";
22.img_object.src = addrObject.value;
23.if (!img_object.width || img_object.width > 300) {
24.img_object.width = 300;
25.}
26.if (!img_object.height || img_object.height > 200) {
27.img_object.height = 200;
28.}
29.}
30.</script>
31.</div>。