关键词:
方法一:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试页面</title> <script type="text/javascript"> //图片预览功能 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; } </script> </head> <body> <div class="yanzRight"> <input type="file" value="打开摄像头" title="摄像头" capture="camera" accept="image/*" onchange="previewImage(this, 5)" id="cameraInput"> <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> </body> </html>
方法二:
<html xmlns="http://www.w3.org/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>
移动端图片上传预览
前天要做wap版的图片上传预览,找了好半天才找到比较适合的插件,我在该插件的基础上修改了一些东西,比如:上传后的图片删除后不能再添加、不能限制上传图片的数量。input虽然有multiple(多选),但是android目前是不支持... 查看详情
移动端预览(双指缩放移动)富文本编辑器上传的图片(代码片段)
通过使用vue-photo-preview插件,实现移动端图片的预览,全屏等功能。1.安装插件npminstallvue-photo-preview--save2.main引入importpreviewfrom'vue-photo-preview'import'vue-photo-preview/dist/skin.css'Vue.use 查看详情
js的dom操作之js实现图片预览功能,手机端电脑端通用(代码片段)
...;或索引值),再加载图片预览,并可以(移动端滑动切换)切换预览图 查看详情
h5移动端实现图片文件上传(代码片段)
PC端上传文件多半用插件,引入flash都没关系,但是移动端要是还用各种冗余的插件估计得被喷死,项目里面需要做图片上传的功能,既然H5已经有相关的接口且兼容性良好,当然优先考虑用H5来实现。 JS代码:<scripttype="text... 查看详情
js移动端多图上传预览传给后端
HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。FileReader的实例拥有4个方法,其中3个用以读取文件,另一个用来中断读取。下面的表格列... 查看详情
js实现的图片预览功能
之前的博文有实现过图片上传预览,但那种方法是预览时就将图片上传,会产生很大的浪费空间。找到了之前有人写的用JS实现的图片预览,就说用js将上传的图片显示,上传代码在之前的博文中有写到。以下是实现的代码:body... 查看详情
js实现异步上传图片+预览
两种js实现方式,一种用原生的ajax;另一种用JQuery,例子比较简单,直接上代码。<!DOCTYPEhtml><html><head><title>Title</title><linkhref="~/Content/Css/bootstrap.3.3.4.min.css"rel="stylesheet"/><scr 查看详情
js前端实现多图图片上传预览
<htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>测试页面</title><scripttype="text/javascript">// 查看详情
vue移动端图片预览,使用photoswipe插件
参考技术Aphotoswipe.js 查看详情
js实现图片上传预览功能,使用base64编码来实现
实现图片上传的方法有很多,这里我们介绍比较简单的一种,使用base64对图片信息进行编码,然后直接将图片的base64信息存到数据库。但是对于系统中需要上传的图片较多时并不建议采用这种方式,我们一般会选择存图片路径的... 查看详情
纯原生js移动端图片压缩上传插件
...就不吐槽了,然后当然是自己做了,先上图:纯原生js的移动端图片压缩上传插件,不依赖任何库用法在html页面中引入input标签,通过 查看详情
js实现图片上传本地预览
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv=" 查看详情
jquery图片上传前先在本地预览(不经过后端处理)
前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得到的反而是C:fakepatha.jpg... 查看详情
记录一个移动端图片预览(支持旋转),使用css强制旋转的坑(代码片段)
...,下-左。<4>搜索一下答案解决办法是:判断touch事件移动方向手动设置想要的偏移位置,但是我没有实现。<5>最后改为使用viewer.js实现需求功能<6>ImagePreview实现图片预览的代码点击查看代码<van-image-preview:loop="swipe... 查看详情
简单实现图片上传预览
/*-----Title-----*/<scripttype="text/javascript"src="Script/jquery-1.4.1.min.js"></script>/*-----JQuery-----*/<scripttype="text/javascript">$(function(){$(‘.selectPic‘).change(functi 查看详情
快速创建vue移动端上传图片功能
参考技术A主要功能:限制图片张数、图片大小压缩、同时上传多张、上传后可编辑删除、上传中和上传失败状态显示。使用配置:使用vantUI、axios请求经过封装、安装image-compressor.js图片压缩npminstallimage-compressor.js//注意是image-comp... 查看详情
exif.js获取图片的详细信息(苹果手机移动端上传图片旋转90度)
Exif.js插件介绍http://code.ciaoca.com/javascript/exif-js/ iOS手机竖着拍的照片经过前端处理之后被旋转了90°的原因以及解决方案https://www.jianshu.com/p/ad4501db178e 查看详情
前后端结合实现vue上传图片并预览效果node+mysql+vue+express(代码片段)
...出了2.0版本,哈哈,通过node简单写了接口,实现前后端结合ÿ 查看详情