图片上传预览

html 图片显示代码

<div id="imageShow" class="column" style="width: 100%" >
     <div class="the-widget-block the-common-margin-top" style="width:100%;">
           <div id="PageImageNew" style="max-width: 175px; max-height: 180px; border: 0px;"></div>
           <div id="PageImage">
                <div class="widget the-common-margin-top" style="border: 1px solid #eeeeee;">
                     <img id="imgHolder" style="max-width: 175px; max-height: 180px; border: 0px;" alt="" />
               </div>
           </div>
     </div>
 </div>

上传的html

<div  id="uploadImageDiv" class="column">    
        <form id="formImageUpload" name="formImageUpload" method="post" enctype="multipart/form-data">
        <input type="hidden" name="imageId_hide" id="imageId_hide" />
        <div id="fileDiv">
            <input type="file" id="theFile" name="theFile" size="20" style="cursor: pointer;
                width: 65px; height: 30px; position: absolute; filter: alpha(opacity:1); -moz-opacity: 0;
                opacity: 0; z-index: 102;" />
        </div>
        <div id="cover" style="position: absolute; background-color: #FAFAFA; z-index: 10;
            filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; overflow: auto; width: 150px;">
            <input id="selectImage" type="button" style="width: 65px; height: 30px;" value="Select" />
            &nbsp;&nbsp;
            <input type="button" value="Upload" id="imageUpload" style="width: 65px; height: 30px;"
                disabled="disabled" onclick="javascript:uploadImage();" />
        </div>
        </form>    
</div

 

 

上传时的遮罩

<div id="temp_div" style="position: absolute; z-index: 987; background-color: White;
    filter: alpha(opacity=50); overflow: hidden; -moz-opacity: 0.5; opacity: 0.5">
</div>

图片预览代码：此部分来源于http://www.cnblogs.com/slyzly/articles/2411940.html

//js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
function PreviewImage(fileObj, imgPreviewId, divPreviewId) {
    var allowExtention = ".jpg,.bmp,.gif,.png"; //允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;
    var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase();
    var browserVersion = window.navigator.userAgent.toUpperCase();
    if (allowExtention.indexOf(extention) > -1) {
        if (fileObj.files) {//HTML5实现预览，兼容chrome、火狐7+等
            if (window.FileReader) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
                }
                reader.readAsDataURL(fileObj.files[0]);
            } else if (browserVersion.indexOf("SAFARI") > -1) {
                alert("不支持Safari6.0以下浏览器的图片预览!");
            }
        } else if (browserVersion.indexOf("MSIE") > -1) {
            if (browserVersion.indexOf("MSIE 6") > -1) {//ie6
                document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
            } else {//ie[7-9]
                fileObj.select();
                if (browserVersion.indexOf("MSIE 9") > -1){
                  document.getElementById(divPreviewId).focus();
                  // fileObj.blur(); //不加上document.selection.createRange().text在ie9会拒绝访问
                  }

                var newPreview = document.getElementById(divPreviewId + "New");

                if (newPreview == null) {
                    newPreview = document.createElement("div");
                    newPreview.setAttribute("id", divPreviewId + "New");
                }

                var _path = document.selection.createRange().text;//ie9 下有时候得到的值为空 就用fileObj.value 代替

                if (_path == null || _path == "") {
                    _path = fileObj.value;
                }
                
                newPreview.style.height = 390 + "px";
                newPreview.style.border = "solid 1px #eeeeee";

                
                newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + _path + "')";
                var tempDivPreview = document.getElementById(divPreviewId);
                
                newPreview.style.display = "block";
                tempDivPreview.style.display = "none";
            }
        } else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
            var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
            if (firefoxVersion < 7) {//firefox7以下版本
                document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL());
            } else {//firefox7.0+                    
                document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0]));
            }
        } else {
            document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
        }
    } else {
        alert("仅支持" + allowExtention + "为后缀名的文件!");
        fileObj.value = ""; //清空选中文件
        if (browserVersion.indexOf("MSIE") > -1) {
            fileObj.select();
            document.selection.clear();
        }
        fileObj.outerHTML = fileObj.outerHTML;
    }
}

//清空type=file 的value值

function clearFileValue(fileId) {
    var file = $(fileId);
    file.after(file.clone(true,false));
    file.remove();
}

 

js上传 部分（ajax 上传 需要引用jquery.form.js）：

var $imgHolder = $('#imgHolder');
var tempDiv = $("#temp_div");

$("#selectImage", "#cover").click(function () {
    $("#theFile").click().select();

});
$("#theFile").click(function () {
    $(this).blur();
});
$("#theFile").change(function () {
    var path = this.value;
    PreviewImage(this, 'imgHolder', 'PageImage');

    $("#imageUpload").prop("disabled", false);    
});

function showRequest(formData, jqForm, options) {

    var flag = true;
    for (var i = 0; i < formData.length; i++) {
        if (formData[i].name == "theFile") {
            if (formData[i].value == null || formData[i].value == "") {
                alert("请选择需要上传的图片！");
                flag = false;
                break;
            }
        }
    }
    if (flag) {
        var position = $("#imageShow").position();
        var height = $("#imageShow").css("height");
        var width = $("#imageShow").css("width");
        var css = { top: position.top, left: position.left, width: width, height: height };
        var content = "<div style=\"margin-top:20%; margin-left:20%;\">图片上传中...</div>";
        tempDiv.empty().append(content).css(css).show();

        return true;
    }
    else {
        return false;
    }
}
function showResponse(responseText, statusText) {

};

function uploadImage() {

    if (confirm("确定要上传吗？")) {

        var formId = "#formImageUpload";
        var CatalogNo = $("#CatalogNo_hide").val();
        if (CatalogNo == "") {
            CatalogNo = $("#txtCatalogNo").val();
        }
        $(formId).ajaxSubmit({
            dataType: "json",
            url: "/ElisaKit/UploadImage?CatalogNo=" + CatalogNo + "&r=" + Math.random(),
            beforeSubmit: showRequest,
            success: function (res) {
                tempDiv.hide();                
                if (res.flag == "ok") {
                    alert("数据保存完毕!");
                    $("#imageUpload").prop("disabled", true);
                    clearFileValue("#theFile");
                }
                else {
                    alert(res.flag);
                }
                return false;
            },
            error: function (error) {
                alert("error:" + error);
            }
        });
        return false;
    } 

};