asp.net mvc3 上傳圖片

    在mvc3 中上傳圖片，可以借助 ajax upload 插件，實現無刷新上傳，具體實現如下：

   

    首先在頁面中引用ajaxupload.js

  

    然后js方法：

   

   

 

var vAlertMsg = '圖片格式不正確,請選擇 jpg|jpeg|gif|png 格式的文件!';

 

function createUploader() {
    var upload1 = new AjaxUpload('#btnUpfile', {
        action: '/Handler/uploadPic.ashx', //后台實現上傳功能
        responseType: 'json',
        autoSubmit: true,
        onSubmit: function (file, ext) {
            if (!(ext && /^(jpg|jpeg|gif|png)$/ig.test(ext))) {
                alert(vAlertMsg, '系統提示');
                return false;
            }
            $('#uploading').html('<img src="http://images.cnblogs.com/ajax-loader.gif" />文件上傳中,請稍后！');
        },
        onComplete: function (file, json) {
            var err = json['Msg'];
            var file1;
            if (err != null && err != '') {
                alert(err);
            }
            else {
                file1 = json['FilePath'];

                $('input[id$="txtWorksImage'"]').val(file1);
               
                $('#uploading').html('<span>*</span>上傳圖片成功');                

                $('input[id$="Pic"]').val(file1);

            }
        }
    });
}

 

 

 

   在頁面中初始化js方法

  

           $( 
          function () { 
          
        createUploader();}) 
         

 

   再在頁面中加入如下html

  

 

 @Html.Hidden("txtWorksImage")
 @Html.TextBoxFor(model => model.Pic)
 <input type="button" style="width:54px; height:24px; border:0px; background-image:url(/images/img_36.gif);" id="btnUpfile" />
 @Html.ValidationMessageFor(model => model.Pic, "", new { @id = "uploading" })

 

   

   注意ID，要與js方法中的一致哦~