File控件选择图片的时候在Html5下马上预览

页面HTML

    <div>
        <img src="@pic.Path" id="img" style="width:200px;height:200px;" />
        <form id="form_photo" method="post" action="/N/SavePhoto?id=1">
            <input style=" display:none" type="file" name="file" id="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" />
            <input type="hidden" name="HeadImg" />
            <input type="button" value="提交" οnclick="savePhoto(1)" />
        </form>
    </div>

JS

/*=============File控件选择图片的时候在Html5下马上预览=================*/
    function InitFile(fileId, imgId) {

        $("#" + imgId).click(function () {
            $("#" + fileId).trigger("click");
        });

        document.getElementById(fileId).onchange = function (evt) {
            // 如果浏览器不支持FileReader，则不处理  
            if (!window.FileReader) return;
            var files = evt.target.files;
            for (var i = 0, f; f = files[i]; i++) {
                if (!f.type.match('image.*')) {
                    continue;
                }
                var reader = new FileReader();
                reader.onload = (function (theFile) {
                    return function (e) {
                        // img 元素  
                        document.getElementById(imgId).src = e.target.result;
                    };

                })(f);
                reader.readAsDataURL(f);

            }
        }

    }


    InitFile("file", "img"); //h5选择图片加载

注：由于

accept="image/*"的缘故，使用谷歌浏览器打开图片文件，响应5~6S（效果不佳，IE浏览器不会--秒开）

查找资料之后修改成

accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
但也一样（IE浏览器不会--秒开），有高见的请求支援

还有就是，form表单提交文件的话，需要加个enctype="multipart/form-data"，
我是使用AJAX提交的（这个需要引用jquery-form.js）

本人新手小白，只是写一写记录，感谢指导我的大大。

转载于:https://www.cnblogs.com/dzw159/p/6189721.html