图片上传预览功能

article/2025/8/24 11:11:26

大多时候我们上传图片，都是直接上传到服务器上，然后返回图片资源所在服务器的路径，然后页面根据这个路径，给图片一个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>