图片上传预览功能
2016-07-04 10:17
323 查看
大多时候我们上传图片,都是直接上传到服务器上,然后返回图片资源所在服务器的路径,然后页面根据这个路径,给图片一个src 属性就能看到图片了。
但是,这样会有一个弊端:如果客户对自己上传的图片不满意,再次换一张图片上传,反复多次,那么就会造成服务器资源的浪费。还会导致很多无用的图片,在服务器上占用资源。
那么,能不能在线预览呢?答案是肯定的。
就是,我们先在前端页面把图片读一下,显示出来,然后再上传到服务器。
下面看一下代码
下面请看js代码
![](https://img-blog.csdn.net/20160704101622675)
上面代码就可以为我们解决图片预览的功能。如果想要后台上传图片的功能请看我的另外一篇博文,附代码
Java实现多个文件上传(验证文件大小、文件类型)
但是,这样会有一个弊端:如果客户对自己上传的图片不满意,再次换一张图片上传,反复多次,那么就会造成服务器资源的浪费。还会导致很多无用的图片,在服务器上占用资源。
那么,能不能在线预览呢?答案是肯定的。
就是,我们先在前端页面把图片读一下,显示出来,然后再上传到服务器。
下面看一下代码
<form target="frameFile"> <img id="uploadPreview" style="width: 100px; height: 100px;" onclick="uploadImage.click();"/> <input id="uploadImage" type="file" name="file" onchange="loadImageFile();fileName.value = this.value;" style="display: none;" /> <input id="fileName" name="fileName" type="hidden" /> </form> <!--iframe是为了form表单上传无刷新,注意上面的form表单有target属性--> <iframe name="framFile" id="framFile" style="display: none;"></iframe>
下面请看js代码
<script> //图片上传 oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; oFReader.onload = function(oFREvent) { document.getElementById("uploadPreview").src = oFREvent.target.result; }; function loadImageFile() { if (document.getElementById("uploadImage").files.length === 0) { $("#uploadPreview").removeAttr("src"); return; } var oFile = document.getElementById("uploadImage").files[0]; if (!rFilter.test(oFile.type)) { return alert("必须选择一张图片"); } oFReader.readAsDataURL(oFile); addEvent(iframe, 'load', function() { alert("上传成功!"); }); } var iframe = document.getElementById("framFile"); function addEvent(el, type, fn) { if (el.addEventListener) { //绝大多数非IE内核浏览器 el.addEventListener(type, fn, false); } else if (el.attachEvent) { //IE内核 el.attachEvent('on' + type, function() { fn.call(el); }); } else { //选择dom元素错误 throw new Error("不支持该浏览器"); } } //为iframe绑定load事件。 //我测试过在兼容IE7以上,IE6没有测试 //其他chrome、firefox、opera也都可以 //如果还有问题再来讨论 // addEvent(iframe, 'load', function () { // alert("上传成功!"); // }); //下面是获取iframe里的值,比如返回来的路径 // function getValue() { // var iframContent = document.getElementById("framFile").contentWindow.document.body; // var content = iframContent.innerHTML; // if (content == "" || content == undefined) { // mini.alert("头像上传失败"); // return; // } else { // if (content.indexOf("</pre>") > 0) { // content = content.substring(content.indexOf("/userImg"), // content.indexOf("</pre>")); // } // } // return content; // } </script>
上面代码就可以为我们解决图片预览的功能。如果想要后台上传图片的功能请看我的另外一篇博文,附代码
Java实现多个文件上传(验证文件大小、文件类型)
相关文章推荐
- 自动共享和上传文件到兼容的托管站点
- 按右键另存图片只能存BMP
- photoshop去除图片上的水印
- 实现FTP整站上传的批处理代码
- asp防止上传图片木马原理解析
- 批处理向FTP上传具有指定属性的文件(增量备份)
- upload上传单张图片
- 图片引发的溢出危机(图)
- C# WinForm控件对透明图片重叠时出现图片不透明的简单解决方法
- C#实现把彩色图片灰度化代码分享
- C#将图片和字节流互相转换并显示到页面上
- C#监控文件夹并自动给图片文件打水印的方法
- 纯CSS实现的当鼠标移上图片添加阴影效果代码
- 如何使用C#从word文档中提取图片
- C#实现打开画图的同时载入图片、最大化显示画图窗体的方法
- C#图片添加水印的实现代码
- 随鼠标移动的图片或文字特效代码
- CSS 图片横向排列实现代码
- C#实现将Email地址转成图片显示的方法
- C#实现图片加相框的方法