图片预览并异步上传

有些信息展示需要图片，如个人证件等，可以由用户自行上传，本文试用原生js实现客户端图片预览，并用ajax异步提交上传；

前端代码：

        <div class="txtItemdiv">
            菜品图片：
        </div>
        <div class="txtItemdiv" id="localImag">
                <img id="dishImage" class="imgDish" src="/HotelWebMvc/Images/dish/174.png" />
        </div>
        <div class="txtItemdiv">
            <input type="file" name="fulImage" id="fulImage" onchange="onChange(this);" style="border: 1px solid #FFB70B; " />
        </div>
<script type="text/javascript">
    //判断是否IE
    function _isIE() {
        if (!!window.ActiveXObject || "ActiveXObject" in window)
            return true;
        else
            return false;
    }

    //校验文件大小
    function checkfilesize(fileObj) {
        var isIE = _isIE();
        var isIE6 = isIE && !window.XMLHttpRequest; //IE6及以下
        var filesize = -1;

        var maxsize = 2 * 1024 * 1024;
        var errMsg = "上传的文件不能超过2M！"
        var tipMsg = "您的浏览器暂不支持计算上传文件的大小，确保上传文件不要2M，建议使用IE、FireFox、Chrome浏览器！"
        var result = "";

        if (isIE6) {
            var img = new Image();
            img.dynsrc = fileObj.value;
            filesize = img.fileSize;
        } else if (fileObj.files && fileObj.files[0]) {
            filesize = fileObj.files[0].size;
        } else {
            fileObj.select();
            fileObj.blur();
            var imgSrc = document.selection.createRange().text;
            var fso = new ActiveXObject("Scripting.FileSystemObject");
            filesize = fso.GetFile(imgSrc).size;
        }

        if (filesize == -1) {
            result = tipMsg;
        } else if (filesize > maxsize) {
            result = errMsg;
        }

        return result;
    }

    //校验文件名
    function checkfilename(fileObj) {
        var errMsg = "图片仅支持jpg和png格式！";
        var result = "";

        var filename = fileObj.value;
        var extname = filename.substring(filename.lastIndexOf('.'), filename.length).toLowerCase();
        if (extname != ".jpg" && extname != ".png") {
            result = errMsg;
        }

        return result;
    }

    //下面用于图片上传预览功能
    function setImagePreview() {
        var isIE = _isIE();
        var isIE6 = isIE && !window.XMLHttpRequest; //IE6及以下

        var docObj = document.getElementById("fulImage");
        var imgObjPreview = document.getElementById("dishImage");
        //files属性：返回一个 Files 集合，由指定文件夹中包含的所有 File 对象组成，包括设置了隐藏和系统文件属性的文件。
        if (isIE6) {
            imgObjPreview.src = docObj.value;
        } else
            if (docObj.files && docObj.files[0]) {
                //火狐下，直接设img属性
                //imgObjPreview.style.display = 'block';
                //imgObjPreview.style.width = '150px';
                //imgObjPreview.style.height = '180px';
                //imgObjPreview.src = docObj.files[0].getAsDataURL();

                //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要以下方式

                imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
            } else {
                //IE下，使用滤镜
                //焦点转移到图片选择按钮
                docObj.select();
                var imgSrc = document.selection.createRange().text;
                var localImagId = document.getElementById("localImag");
                //必须设置初始大小
                localImagId.style.width = "250px";
                localImagId.style.height = "280px";
                //图片异常的捕捉，防止用户修改后缀来伪造图片
                try {
                    localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                }
                catch (e) {
                    alert("您上传的图片格式不正确，请重新选择!" + e.message);
                    return false;
                }
                imgObjPreview.style.display = 'none';
                document.selection.empty();
            }
        return true;
    }

    //图片选中后检查
    function onChange(fileObj) {
        //文件大小限制
        var filesizeErr = checkfilesize(fileObj);
        if (filesizeErr.length != 0) {
            fileObj.value = null;
            alert(filesizeErr);
            return;
        }
        //文件类型限制
        var filenameErr = checkfilename(fileObj);
        if (filenameErr.length != 0) {
            fileObj.value = null;
            alert(filenameErr);
            return;
        }

        //图片预览
        setImagePreview();
    }

    //异步提交
    function ajaxSubmit() {
        //提交地址
        var url = "@ViewBag.url";
        //菜品id
        var DishId = '@Model.DishId';
        // 数据提交
        $.ajax({
            type: "POST", //设置请求发送的方式
            timeout: 10000, //设置服务器请求超时时间
            url: url, //提交的地址
            data: $("#myform").serialize(), //序列化表单元素值
            beforeSend: function () {//表单提交前执行的函数
                //提示信息，此处省略...
            },
            error: function () {//提交发生错误的时候执行的函数
                //提示信息，此处省略...
            },
            success: function (data) {//提交成功的时候执行的函数
                data = JSON.parse(data);
                if (data >= "1") {
                    //上传图片
                    UploadFile(data);
                } else {
                    //提示信息，此处省略...
                }
            }
        });
    }

    //上传文件方法
    function UploadFile(data) {
        var fileObj = document.getElementById("fulImage").files[0]; // js 获取文件对象
        if (fileObj == undefined) {//是否有文件
            //提示信息，此处省略...
            return;
        }
        var url = "SaveImage"; // 接收上传文件的后台地址

        var form = new FormData(); // FormData 对象
        form.append("file", fileObj); // 文件对象
        form.append("DishId", data.DishId);

        xhr = null;  // XMLHttpRequest 对象
        if (window.XMLHttpRequest) {// code for IE7, Firefox, Mozilla, etc.
            xhr = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {// code for IE5, IE6
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
        xhr.onload = uploadComplete; //请求完成
        xhr.onerror = uploadFailed; //请求失败
        xhr.send(form); //开始上传，发送form数据
    }

    //上传成功响应
    function uploadComplete(evt) {
        //服务端接收完文件返回内容
        var rText = evt.target.responseText;
        //提示信息，此处省略...

        //页面跳转，2019-01-10
        var DishId = '@Model.DishId';
        if (DishId == 0) {
            location.reload();
        } else {
            history.go(-1);
            location.reload();
        }
    }
    //上传失败
    function uploadFailed(evt) {
        alert("图片上传失败！");
    }
    //取消上传
    function cancleUploadFile() {
        xhr.abort();
    }

    //让页面的图片不从缓存中去取，2019-01-16
    function noImageCache() {
        var dishImage = document.getElementById('dishImage');
        dishImage.src = dishImage.src + '?' + Math.random();
    };
    addLoadEvent(noImageCache);
</script>

后端代码：

    [Authorize]
    public class DishesController : Controller
    {
        //保存上传图片
        public ActionResult SaveImage(HttpPostedFileBase file)
        {
            //获取用户提交的参数
            string DishId = Request.Form["DishId"];
            //是否有文件
            if (file == null)
                return Content("图片没有上传！");
            //文件大小限制
            double fileLength = file.ContentLength / (1024.0 * 1024.0);
            if (fileLength > 2.0)
            {
                return Content("图片不能超过2M！");
            }
            //文件类型限制
            string ext = file.FileName.Substring(file.FileName.LastIndexOf("."));
            string fileName = "";
            if (ext == ".jpg" || ext == ".png")
            {
                fileName = DishId + ".PNG";
            }
            else
            {
                return Content("图片仅支持JPG、png格式！");
            }
            //获取文件保存路径
            string serverPath = Server.MapPath("~/Images/dish");
            //执行保存文件
            try
            {
                string path = serverPath + "\\" + fileName;
                file.SaveAs(path);
                return Content("上传图片成功！");
            }
            catch (Exception ex)
            {
                return Content("上传图片失败！" + ex.Message );
            }
        }
    }