图片上传预览功能

大多时候我们上传图片，都是直接上传到服务器上，然后返回图片资源所在服务器的路径，然后页面根据这个路径，给图片一个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实现多个文件上传（验证文件大小、文件类型）

图片上传预览功能

猜你喜欢