您的位置:首页 > 其它

图片上传预览功能

2016-07-04 10:17 323 查看
大多时候我们上传图片,都是直接上传到服务器上,然后返回图片资源所在服务器的路径,然后页面根据这个路径,给图片一个src 属性就能看到图片了。

但是,这样会有一个弊端:如果客户对自己上传的图片不满意,再次换一张图片上传,反复多次,那么就会造成服务器资源的浪费。还会导致很多无用的图片,在服务器上占用资源。

那么,能不能在线预览呢?答案是肯定的。

就是,我们先在前端页面把图片读一下,显示出来,然后再上传到服务器。

下面看一下代码

<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实现多个文件上传(验证文件大小、文件类型)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  图片 上传 在线预览