下载文档原格式
1.1不同浏览器下的JavaScript兼容技术1、表单中的成员元素的引用document.formName.item("itemName")（1）在IE中可以使用document.formName.item("itemName") 或document.formName.elements ["elementName"]; （2）在Firefox中只能使用document.formName.elements["elementName"];（3）推荐的兼容解决方法统一使用document.formName.elements["elementName"]引用在当前的文档中ID为"formName"的表单（From）中获取ID为"elementName"的表单成员元素。
2、集合类对象中的成员访问的问题（1）在IE中可以使用() 或[] 获取集合类对象中的成员（2）在Firefox下只能使用[ ]获取集合类对象中的成员。
（3）推荐的兼容解决方法是统一使用[] 获取集合类对象成员。
3、("idName")问题（1）在IE中可以使用("idName") 或getElementById("idName") 来取得id 为idName 的HTML对象；（2）在Firefox中只能使用getElementById("idName") 来取得id 为idName 的HTML对象。
（3）推荐的兼容解决方法是统一采用getElementById("idName") 来取得id 为idName 的HTML对象。
4、变量名与某HTML对象ID相同的问题（1）在IE中HTML对象的ID可以作为document 的下属对象变量名直接使用，而Firefox 下则不能；Firefox下，可以使用与HTML对象ID相同的变量名，IE下则不能。
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属性。
前端浏览器兼容问题及解决办法什么是兼容问题？ 所谓的浏览器兼容性问题，是指因为不同的浏览器对同⼀段代码有不同的解析，造成页⾯显⽰效果不统⼀的情况。
在⼤多数情况下，我们的需求是，⽆论⽤户⽤什么浏览器来查看我们的⽹站或者登陆我们的系统，都应该是统⼀的显⽰效果。
所以浏览器的兼容性问题是前端开发⼈员经常会碰到和必须要解决的问题。
CSS⾥的兼容性问题 1.cursor:hand VS cursor:pointerfirefox 不⽀持hand，但ie⽀持 pointer解决⽅法:统⼀使⽤pointer2. innerText在IE中能正常⼯作，但在FireFox中却不⾏解决⽅法:需⽤textContentif(navigator.appName.indexOf("Explorer")>-1){document.getElementById('element').innerText = "my text";}else{document.getElementById('element').textContent = "my text";}透明IE：filter:alpha(opacity=60)。
FF：opacity:0.6。
4.盒⼦模型标准 w3c 盒⼦模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分； IE盒⼦模型的范围也包括margin、border、padding、content。
和标准 w3c 盒⼦模型不同的是：ie 盒⼦模型的 content 部分包含了 border 和 padding。
因此，问题主要表现在css中的width是否计算border和padding的问题，这个是默认的盒⼦解析模型不同导致的。
IE6：中包括border和padding(box-sizing: border-box;)IE7和⾮IE：width宽度不包括border和padding(box-sizing: content-box;)解决⽅式：根据使⽤⽅式，写好box-sizing属性。
JS调⽤摄像头并上传图⽚到服务器本功能只能把图⽚转成base64码上传，如何上传图⽚还没有修改出来，有兴趣的朋友弄出来了，请给我留下⾔，谢谢了！直接上代码，需要的朋友直接复制就可以使⽤了。
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><script type="text/javascript" src="https:///jquery/1.10.2/jquery.min.js"></script><script>//判断浏览器是否⽀持HTML5 Canvaswindow.onload = function () {try {//动态创建⼀个canvas元，并获取他2Dcontext。
如果出现异常则表⽰不⽀持 document.createElement("canvas").getContext("2d");// document.getElementById("support").innerHTML = "浏览器⽀持HTML5 CANVAS";}catch (e) {// document.getElementByIdx("support").innerHTML = "浏览器不⽀持HTML5 CANVAS";}};//这段代主要是获取摄像头的视频流并显⽰在Video 签中window.addEventListener("DOMContentLoaded", function () {var canvas = document.getElementById("canvas"),context = canvas.getContext("2d"),video = document.getElementById("video"),videoObj = { "video": true },errBack = function (error) {console.log("Video capture error: ", error.code);};$("#snap").click(function () {context.drawImage(video, 0, 0, 330, 250);})//navigator.getUserMedia这个写法在Opera中好像是navigator.getUserMedianowif (navigator.getUserMedia) {navigator.getUserMedia(videoObj, function (stream) {video.srcObject = stream;video.play();}, errBack);} else if (navigator.webkitGetUserMedia) {navigator.webkitGetUserMedia(videoObj, function (stream) {video.src = window.webkitURL.createObjectURL(stream);video.play();}, errBack);}}, false);//上传服务器function CatchCode() {var canvans = document.getElementById("canvas");//获取浏览器页⾯的画布对象//以下开始编数据var imgData = canvans.toDataURL();console.log(canvans.toLocaleString());//将图像转换为base64数据var base64Data = imgData.substr(22);//在前端截取22位之后的字符串作为图像数据//开始异步上$.post("uploadImgCode.ashx", { "img": base64Data }, function (data, status) {if (status == "success") {if (data == "OK") {alert("⼆维已经解析");}else {// alert(data);}}else {alert("数据上失败");}}, "text");}</script></head><body><div id="contentHolder"><video id="video" width="320" height="320" autoplay></video><input type="button" id="snap" style="width:100px;height:35px;" value="拍照" /><canvas style="" id="canvas" width="320" height="320"></canvas><input type="button" value="上传" onclick="CatchCode()" /> </div></body></html>。
JavaScript实现前端下载图片前几天公司的项目有个需求，实现点击下载图片功能，当时我就就想着还不简单嘛，当即写下以下代码：const download = document.createElement('a');download.setAttribute('download', downloadName);download.clik();结果出乎意料，浏览器并没有将图片下载，而是将图片在窗口中打开了。
我查了下资料，发现像Chrome 等现代浏览器会识别图片并将其打开。
现在下载图片网上大部分做法是响应时添加下载头，浏览器识别到下载头就会将其下载，但是我这前端项目并做不到。
那么，问题来了，如何实现前端下载图片？1. 实现思路1.将图片装换成Data URLs2.下载图片Data URLsData URLs，即前缀为data: 协议的的URL，其允许内容创建者向文档中嵌入小文件。
Data URLs 由四个部分组成：前缀(data:)、指示数据类型的MIME 类型、如果非文本则为可选的 base64 标记、数据本身：data:[<mediatype>][;base64],<data>mediatype 是个 MIME 类型的字符串，例如 "image/jpeg" 表示 JPEG 图像文件。
如果被省略，则默认值为text/plain;charset=US-ASCII如果数据是文本类型，你可以直接将文本嵌入(根据文档类型，使用合适的实体字符或转义字符)。
如果是二进制数据，你可以将数据进行 base64 编码之后再进行嵌入。
详细请看 MDN 对 Data URLs 的解释。
2. 代码实现以下是获取图片 DataURL 的示例代码：/*** 获取图片的 base64 编码 DataURL* @param image JS 图像对象* @return {string} 已编码的 DataURL*/getImageDataURL(image) {// 创建画布const canvas = document.createElement('canvas');canvas.width = image.width;canvas.height = image.height;const ctx = canvas.getContext('2d');// 以图片为背景剪裁画布ctx.drawImage(image, 0, 0, image.width, image.height);// 获取图片后缀名const extension = image.src.substring(stIndexOf('.') + 1).toLowerCase();// 某些图片 url 可能没有后缀名，默认是 pngreturn canvas.toDataURL('image/' + extension, 1);},执行上面的函数后会返回如下面的格式一样的字符串data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA MgAAADICAYAAACtWK6eAAAgAElEQVR4Xu1dB3hUxfb/bc3upp OeQOgIAioKCiqWJ/bysFd89vcXe0WfvSJ2wY6gPhX1WZ...注意：图片越大，转换后的base64 编码越长，尽量避免对大图进行 DataURL 转换，防止转换后的长度超出浏览器限制以下是下载图片的示例代码：downLoad(downloadName, url) {const tag = document.createElement('a');// 此属性的值就是下载时图片的名称，注意，名称中不能有半角点，否则下载时后缀名会错误tag.setAttribute('download', downloadName.replace(/\./g, '。
关于js上传⽂件的校验以及预览花了⼀上午的时间理了下思路，整理了下上传⽅⾯的问题。
主要是关于格式的校验以及⼤⼩和数量的校验，可能有部分缺失，望⼤家提出，及时修正。
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>⽂件上传测试</title><style type="text/css">*{margin: 0;padding: 0;}a{text-decoration: none;}.filec{display: block;position: absolute;top: 0;left: 0;width: 180px;height: 39px;cursor: pointer;opacity: 0;filter:alpha(opacity: 0);}.xhx{width: 100px;height: 30px;border-bottom: 1px solid #000;display: inline-block;line-height: 24px;}.button{width: 80px;height: 39px;line-height: 39px;border: 0;border-radius: 3px;}</style></head><body><div class="xhx" id="xhx">请上传⽂件</div><input type="button" class="button" name="" id="" value="点我上传" /><input type="file" class="filec" name="test" id="file" onchange="javascript:setImagePreview();"><div id="imgxx"></div><script type="text/javascript">//单图⽚上传function setImagePreview() {var path = document.getElementById("file").value;// alert(path);// 分离名称和后缀var path1 = path.split(".");var path2 = path1[path1.length - 1].toLowerCase()// 判断格式if(path2.localeCompare('docx') === 0 || path2.localeCompare('doc') === 0 || path2.localeCompare('pdf') === 0) {// alert("true");// alert(path2);// 去除路径和后缀名，取⽂件名称var pos1 = stIndexOf("\\");// alert(pos1);var pos2 = stIndexOf(".");// alert(pos2);var pos = path.substring(pos1 + 1, pos2);var text =path.substring(pos1+1);document.getElementById("xhx").innerHTML=text;alert("上传成功");// alert(pos);// 获取⽂件地址本地预览var file = document.getElementById("file");var objectURL = window.URL.createObjectURL(file.files[0]);// alert(objectURL);} else if(path2.localeCompare('jpg') === 0 || path2.localeCompare('png') === 0) {var pos1 = stIndexOf("\\");// alert(pos1);var pos2 = stIndexOf(".");// alert(pos2);var pos = path.substring(pos1 + 1, pos2);// alert("上传成功");var file = document.getElementById("file");var objectURL = window.URL.createObjectURL(file.files[0]);// alert(objectURL);// 判断⼤⼩// var obj_img = document.getElementById('tempimg');// obj_img.dynsrc=obj_file.value;filesize = file.files[0].size;// alert(filesize);var imgmax = 2 * 1024 * 1024;if(filesize > imgmax) {alert("⽂件⼤⼩超出范围");} else {alert("上传成功");// 创建图⽚元素var imgxx = document.getElementById("imgxx");// 添加imgvar img = document.createElement("img");var div = document.createElement("div");img.setAttribute("id", pos); div.setAttribute("id", pos);imgxx.appendChild(img);imgxx.appendChild(div);div.innerHTML='<a title="移除本图⽚" href="javascript:void(0);" style="float: left;margin-left: -22px;z-index: 22;background: #fff;">×</a>' img.width = "100";img.src = objectURL;img.style.float="left"img.style.marginLeft="20px"div.setAttribute("onclick", "javascript:removeElement(this)"); var imglength = document.getElementById("imgxx").getElementsByTagName("img").length ;// alert(imglength);if(imglength>3){alert("上传完毕");file.style.display="none";// alert(file.display);}}} else {alert("请上传正确的格式");}}// 删除图⽚function removeElement(_element){var _parentElement = _element.parentNode;var id=_element.id;document.getElementById(id).innerHTML = "";document.getElementById(id).remove();document.getElementById(id).remove();file.value = "";return;}</script></body></html>。
jquery实现上传图片预览（需要浏览器支持html5）jquery实现上传图片预览(需要浏览器支持html5)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>HTML5 Upload</title><style type="text/css">#destination{filter:progid:DXImageTransform.Microsoft.AlphaImageLoad er(true,sizingMethod=scale);}</style><!--<script type="text/javascript" src="/jquery-1.8.2.min.js"></script>--><script type="text/javascript" src="http://localhost/jQuery/jquery.js"></script><script type="text/javascript">//处理file input加载的图片文件$(document).ready(function(e) {//判断浏览器是否有FileReader接口if(typeof FileReader =='undefined'){$("#destination").css({'background':'none'}).html('亲,您的浏览器还不支持HTML5的FileReader接口,无法使用图片本地预览,请更新浏览器获得最好体验');//如果浏览器是ieif($.browser.msie===true){//ie6直接用file input的value值本地预览if($.browser.version==6){$("#imgUpload").change(function(event){//ie6下怎么做图片格式判断?var src = event.target.value;//var src = document.selection.createRange().text; //选中后 selection对象就产生了这个对象只适合ievar img = '<img src="'+src+'" width="200px" height="200px" />';$("#destination").empty().append(img);});}//ie7,8使用滤镜本地预览else if($.browser.version==7 || $.browser.version==8){$("#imgUpload").change(function(event){$(event.target).select();var src = document.selection.createRange().text;var dom = document.getElementById('destination');//使用滤镜成功率高dom.filters.item('DXImageTransform.Microsoft.AlphaImageL oader').src= src;dom.innerHTML = '';//使用和ie6相同的方式设置src为绝对路径的方式有些图片无法显示效果没有使用滤镜好/*var img = '<img src="'+src+'" width="200px"height="200px" />';$("#destination").empty().append(img);*/});}}//如果是不支持FileReader接口的低版本firefox 可以用getAsDataURL接口else if($.browser.mozilla===true){$("#imgUpload").change(function(event){//firefox2.0没有event.target.files这个属性就像ie6那样使用value值但是firefox2.0不支持绝对路径嵌入图片放弃firefox2.0 //firefox3.0开始具备event.target.files这个属性并且开始支持getAsDataURL()这个接口一直到firefox7.0结束不过以后都可以用HTML5的FileReader接口了if(event.target.files){//console.log(event.target.files);for(var i=0;i<event.target.files.length;i++){var img = '<img src="'+event.target.files.item(i).getAsDataURL()+'"width="200px" height="200px"/>';$("#destination").empty().append(img);}}else{//console.log(event.target.value);//$("#imgPreview").attr({'src':event.target.value});});}}else{// version 1/*$("#imgUpload").change(function(e){var file = e.target.files[0];var fReader = new FileReader();//console.log(fReader);//console.log(file);fReader.onload=(function(var_file){return function(e){$("#imgPreview").attr({'src':e.target.result,'alt':var_}); }})(file);fReader.readAsDataURL(file);});*///单图上传 version 2/*$("#imgUpload").change(function(e){var file = e.target.files[0];var reader = new FileReader();reader.onload = function(e){//displayImage($('bd'),e.target.result);//alert('load');$("#imgPreview").attr({'src':e.target.result});reader.readAsDataURL(file);});*///多图上传 input file控件里指定multiple属性 e.target是dom 类型$("#imgUpload").change(function(e){for(var i=0;i<e.target.files.length;i++){var file = e.target.files.item(i);//允许文件MIME类型也可以在input标签中指定accept属性//console.log(/^image\/.*$/i.test(file.type));if(!(/^image\/.*$/i.test(file.type))){continue; //不是图片就跳出这一次循环}//实例化FileReader APIvar freader = new FileReader();freader.readAsDataURL(file);freader.onload=function(e){var img = '<img src="'+e.target.result+'" width="200px" height="200px"/>';$("#destination").empty().append(img);}}});//处理图片拖拽的代码var destDom = document.getElementById('destination');destDom.addEventListener('dragover',function(event){event.stopPropagation();event.preventDefault();},false);destDom.addEventListener('drop',function(event){event.stopPropagation();event.preventDefault();var img_file = event.dataTransfer.files.item(0); //获取拖拽过来的文件信息暂时取一个//console.log(event.dataTransfer.files.item(0).type);if(!(/^image\/.*$/.test(img_file.type))){alert('您还未拖拽任何图片过来,或者您拖拽的不是图片文件');return false;}fReader = new FileReader();fReader.readAsDataURL(img_file);fReader.onload = function(event){destDom.innerHTML='';destDom.innerHTML = '<img src="'+event.target.result+'" width="200px" height="200px"/>';};},false);}});</script></head><body><input type="file" id="imgUpload" name="imgUpload" draggable="true" single/> <!--允许file控件接受的文件类型--> <!--<input type="file" id="imgUpload" name="imgUpload" accept="image/*" multiple/>--><div id="destination" style="width:200px;height:200px;border:1px solid #000000;"><img src="nopic.jpg" /></div></body></html>。
Ajax实现图⽚上传并预览功能先给⼤家展⽰下效果图，⼤家感觉不错，请参考实现代码。
最近在使⽤ThinkPHP5开发项⽬中客户有⼀个需求是在图⽚上传时附带预览功能。
虽然现在有很多的插件能实现，但是还是觉得⾃⼰写⽐较好。
我们知道，图⽚上传需要⼀个input:file表单<input type='file' name='pic'>当我们点击表单的时候提⽰选择需要上传的图⽚。
但是此需求我们分析⼀下，可以在点击图⽚的时候使⽤JS实现预览功能，并且楼主也是这样做的。
代码如下：function getFileUrl(sourceId) {var url;url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));return url;}function preImg(sourceId, targetId) {var url = getFileUrl(sourceId);var imgPre = document.getElementById(targetId);imgPre.src = url;}效果如下:但是这样的话会涉及很多兼容问题。
所以就想到了Ajax，在图⽚上传时，使⽤Ajax技术。
将图⽚上传到服务器，再由服务器返回给我们图⽚的上传地址，然后添加到img标签中去。
过程虽然⿇烦了点，但是亲测不会有兼容问题。
需要发送Ajax请求的话，当然input:file表单是不能实现我们的需求的，因此，我们需要给表单关联⼀个单击事件去帮我们进⾏Ajax请求并选择图⽚<form id="form1"><label for="exampleInputEmail1">头像</label><input type="button" value="上传图⽚" onclick="f.click()" class="btn_mouseout"/><br><p><input type="file" id="f" name="f" onchange="sc(this);" style="display:none"/></p></form><div id="result"></div>当我们点击上传图⽚这个button按钮时触发input:file选择图⽚实现Ajax上传<script>function sc(){var animateimg = $("#f").val(); //获取上传的图⽚名带//var imgarr=animateimg.split('\\'); //分割var myimg=imgarr[imgarr.length-1]; //去掉 // 获取图⽚名var houzui = stIndexOf('.'); //获取 . 出现的位置var ext = myimg.substring(houzui, myimg.length).toUpperCase(); //切割 . 获取⽂件后缀var file = $('#f').get(0).files[0]; //获取上传的⽂件var fileSize = file.size; //获取上传的⽂件⼤⼩var maxSize = 1048576; //最⼤1MBif(ext !='.PNG' && ext !='.GIF' && ext !='.JPG' && ext !='.JPEG' && ext !='.BMP'){yer.msg('⽂件类型错误,请上传图⽚类型');return false;}else if(parseInt(fileSize) >= parseInt(maxSize)){yer.msg('上传的⽂件不能超过1MB');return false;}else{var data = new FormData($('#form1')[0]);$.ajax({url: "{:url('User/uppic')}",type: 'POST',data: data,dataType: 'JSON',cache: false,processData: false,contentType: false}).done(function(ret){if(ret['isSuccess']){var result = '';var result1 = '';// $("#show").attr('value',+ ret['f'] +);result += '<img src="' + '__ROAD__' + ret['f'] + '" width="100">';result1 += '<input value="' + ret['f'] + '" name="user_headimg" style="display:none;">';$('#result').html(result);$('#show').html(result1);layer.msg('上传成功');}else{layer.msg('上传失败');}});return false;}}</script>这⾥我们采⽤FormData对⾯进⾏表单提交，然后服务器端接收public function uppic(){$file = request()->file('f');$info = $file->move(ROOT_PATH . 'public/uploads/avatar');$a=$info->getSaveName();$imgp= str_replace("\\","/",$a);$imgpath='uploads/avatar/'.$imgp;$banner_img= $imgpath;$response = array();if($info){$response['isSuccess'] = true;$response['f'] = $imgpath;}else{$response['isSuccess'] = false;}echo json_encode($response);}这⾥会返回图⽚上传的url路径：$response['f] = $imgpath;现在我们要做的就是将这个url写进前台HTML部分进⾏⼀个显⽰<div class="form-group"><!-- 将Ajax上传的图⽚路径添加到数据库 --><div id="show"></div></div>在JS中添加$('#show').html(result1);总结以上所述是⼩编给⼤家介绍的Ajax实现图⽚上传并预览功能，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。
【JavaScript】使⽤url下载⽂件，解决chrome浏览器⾃动识别图⽚打开问题。
前两天做的⼀个⽂件下载，使⽤⽂件存储地址url去下载，不需要打开⽂件。
使⽤新建a标签，触发点击事件来进⾏下载。
downloadNormalFile(src, filename) {var link = document.createElement('a');link.setAttribute("download", filename);link.href = src;document.body.appendChild(link);//添加到页⾯中，为兼容Firefox浏览器link.click();document.body.removeChild(link);//从页⾯移除},新建a标签，设置href为⽂件存储地址，添加html5的新属性download，然后触发a标签的click事件即可。
但是在⽕狐浏览器中a标签需要添加到页⾯中才能触发事件下载。
所以添加到body中后⼜移除。
上⾯是通常情况下的做法，我遇到⼀个问题，在chrome浏览器中当⽂件是图⽚时，浏览器不会下载，⽽是打开图⽚链接显⽰。
⽹上查找了很多⽅法，采⽤将utl转换为base64格式，然后触发下载，这样浏览器不会⾃动识别url打开显⽰。
ImgtodataURL(url, filename, fileType) {this.getBase64(url, fileType, (_baseUrl) => {// 创建隐藏的可下载链接var eleLink = document.createElement('a');eleLink.download = filename;eleLink.style.display = 'none';// 图⽚转base64地址eleLink.href = _baseUrl;// 触发点击document.body.appendChild(eleLink);eleLink.click();// 然后移除document.body.removeChild(eleLink);});},getBase64(url, fileType, callback) {//通过构造函数来创建的 img 实例，在赋予 src 值后就会⽴刻下载图⽚var Img = new Image(),dataURL = '';Img.src = url;Img.setAttribute("crossOrigin", 'Anonymous');Img.onload = function () { //要先确保图⽚完整获取到，这是个异步事件var canvas = document.createElement("canvas"), //创建canvas元素width = Img.width, //确保canvas的尺⼨和图⽚⼀样height = Img.height;canvas.width = width;canvas.height = height;canvas.getContext("2d").drawImage(Img, 0, 0, width, height); //将图⽚绘制到canvas中dataURL = canvas.toDataURL('image/' + fileType); //转换图⽚为dataURLcallback ? callback(dataURL) : null;};}getbase64采⽤canvas绘制图⽚后采⽤callback⽅法调⽤异步加载onload⽅法获取到的dataurl，然后再新建a标签触发下载。
angularjs上传图片时预览承接上一篇文章[html] view plain copy1./*图片点击放大再点击还原*/2.angular.module('routerModule').directive('enlargePic',func tion(){//enlargePic指令名称，写在需要用到的地方img中即可实现放大图片3.return{4.restrict: "AE",5.link: function(scope,elem){6.elem.bind('click',function($event){7.var img = $event.srcElement || $event.target;8.angular.element(document.querySelector(".mask"))[0].style.display = "block";9.angular.element(document.querySelector(".bigPic"))[0].src = img.src;10.})11.}12.}13.})14..directive('closePic',function(){15.return{16.restrict: "AE",17.link: function(scope,elem){18.elem.bind('click',function($event){19.angular.element(document.querySelector(".mask"))[0]. style.display = "none";20.})21.}22.}23.});[html] view plain copy1.html关键代码2.<!-- 图片 -->3.<div><img ng-src="showImg/{{dealer.idCardBack}}" class="idCardBack" enlarg e-pic/></div>4.5.<!-- 图片放大遮罩层 -->6.7.<div class="mask" close-Pic>8.<div class="mask-box"></div>9.<div class="big-pic-wrap">10.<img src="" alt="" class="bigPic" />11.<span class="close-pic"><i class="fa fa-close"></i></span>12.</div>13.</div>14.15.16.css代码17./*图片放大遮罩层*/18..mask{19.display: none;20.}21..mask-box{22.position:absolute;23.top: 0;24.left: 0;25.width: 100%;26.height: 100%;27.z-index: 80;28.opacity: 0.5;29.background: #000;30.}31..big-pic-wrap{32.position:fixed;33.top:50%;34.left:50%;35.margin-left: -460px;36.margin-top: -300px;37.width:920px;38.height:620px;39.padding:10px;40.z-index:90;41.background:#fff;42.}43..bigPic{44.width:900px;45.height:600px;46.}47./*关闭大图按钮*/48..close-pic{49.position:absolute;50.top:-5px;51.right:-5px;52.display:inline-block;53.width: 35px;54.height: 35px;55.cursor:pointer;56.border-radius:50% !important;57.background: #393A3C;58.text-align: center;59.line-height: 40px;60.}61..close-pic:hover{62.background: #D43F27;63.}64..close-pic>i{65.font-size: 25px;66.color:#fff;67.}[html] view plain copy1.<pre code_snippet_id="2219317" snippet_file_name="blo g_20170221_1_3190284" name="code" class="css"><pre code_ snippet_id="2219317" snippet_file_name="blog_20170221_1_31 90284"></pre>2.<pre></pre>3.<pre></pre>4.<pre></pre>5.<pre></pre>6.<pre></pre>7.8.</pre>。
上传图片前预览图片这种效果应用比较广泛，实现的方也大同小异，下面为大家介绍下，在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浏览器显示图片问题。
因为360浏览器6.2用的是Chrome的内核，而复制代码代码如下:
window.URL.createObjectURL(docObj.files[0]);
更多信息请查看IT技术专栏。
