如何使用ajaxupload3.5上傳照片時檢查文件大小

我使用ajaxuploader上傳和更改用戶照片使用此處的解決方案：http://www.c-sharpcorner.com/blogs/4183/upload-image-by-ajax-uploader-with-jquery.aspx 下面的代碼工作正常，但我不知道如何檢查文件大小在客戶端或（如果客戶端不可能）如何從服務器端獲得響應。在mycode下面的響應id整個頁面的HTML。如何使用ajaxupload3.5上傳照片時檢查文件大小

<script src="../js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script> 
    <script src="../js/ajaxupload.3.5.js" type="text/javascript"></script> 
<script type="text/javascript" language="javascript"> 

     $(function() { 

      $('#<%=status_message.ClientID%>').html(''); 
      var btnUpload = $('#upload_button'); 
      var status = $('#status_message'); 
      new AjaxUpload(btnUpload, { 
       action: 'test_photoUpload.aspx/uploadPhoto', 
       name: 'uploadfile', 
       onSubmit: function (file, ext) { 
        $('#<%=status_message.ClientID%>').html(''); 
        $('#imgLoad').show(); 
        if (!(ext && /^(jpg|png|jpeg|gif)$/.test(ext))) { 
         // extension is not allowed 
         $('#imgLoad').hide(); 
         $('#<%=status_message.ClientID%>').html('Only JPG, PNG or GIF files are allowed'); 
         alert("submitted"); 
         return false; 
        } 
        //      if (file.ContentLength > 1024 * 1024 * 2) { 
        //       $('#<%=status_message.ClientID%>').html('Please upload photo less than 2MB size.'); 
        //       alert("submitted"); 
        //       return false; 
        //      } 

       }, 
       onComplete: function (file, response) { 
        alert(response); 
        status.text(''); 
        $('#<%=hdPhoto.ClientID%>').val(file); 
        $('#<%=imgPhoto.ClientID%>').attr('src', 'UserImages/' + file); 
        // $('#<%=status_message.ClientID%>').html(file.toString()); 
        $('#imgLoad').hide(); 
        return false; 
       } 
      }); 
     }); 

     </script> 



private string uploadPhoto() 
     { 
      string chkResult = "false"; 
      //upload photo code 
      string i = Request.Files.ToString(); 
      string ext = Path.GetExtension(Request.Files[0].FileName.ToString().ToLower()); 

      if (ext == ".png" || ext == ".jpg" || ext == ".gif" || ext == ".jpeg") 
      { 
       if (Request.Files[0].ContentLength <= 1024 * 1024 * 2) 
       { 
        if (File.Exists(Server.MapPath("UserImages") + "\\" + System.IO.Path.GetFileName(Request.Files[0].FileName))) 
         File.Delete(Server.MapPath("UserImages") + "\\" + System.IO.Path.GetFileName(Request.Files[0].FileName)); 

        Request.Files[0].SaveAs(Server.MapPath("UserImages") + "\\" + System.IO.Path.GetFileName(Request.Files[0].FileName)); 
        chkResult = "true"; 
       } 
       else 
       { 
        status_message.InnerHtml = "Please upload less than 2MB size."; 
        chkResult = "false"; 
       } 
      } 
      else 
      { 
       status_message.InnerHtml = "Please upload only png, jpg, jpeg or gif file."; 
       chkResult = "false"; 
      } 
      // Response.Close(); 
      // Response.End(); 
      return chkResult; 
     }

我試着將響應序列化爲Json並返回，但響應是將相同的HTML轉換爲字符串。我想是這樣的：

$(function() { 

      $('#<%=status_message.ClientID%>').html(''); 
      var btnUpload = $('#upload_button'); 
      var status = $('#status_message'); 
      new AjaxUpload(btnUpload, { 
       action: 'test_photoUpload.aspx/uploadPhoto', 
       name: 'uploadfile', 
       dataType: 'json', 
       contentType: "application/json; charset=utf-8", 
       onSubmit: function (file, ext) { 
        $('#<%=status_message.ClientID%>').html(''); 
        $('#imgLoad').show(); 
        if (!(ext && /^(jpg|png|jpeg|gif)$/.test(ext))) { 
         // extension is not allowed 
         $('#imgLoad').hide(); 
         $('#<%=status_message.ClientID%>').html('Only JPG, PNG or GIF files are allowed'); 
         alert("submitted"); 
         return false; 
        } 
        //      if (file.ContentLength > 1024 * 1024 * 2) { 
        //       $('#<%=status_message.ClientID%>').html('Please upload photo less than 2MB size.'); 
        //       alert("submitted"); 
        //       return false; 
        //      } 

       }, 
       onComplete: function (file, response) { 
        var obj = JSON.stringify(response); 
        //var obj = jQuery.parseJSON(response); 
        alert(obj); 
        alert(response); 
        status.text(''); 
        $('#<%=hdPhoto.ClientID%>').val(file); 
        $('#<%=imgPhoto.ClientID%>').attr('src', 'UserImages/' + file); 
        // $('#<%=status_message.ClientID%>').html(file.toString()); 
        $('#imgLoad').hide(); 
        return false; 
       } 
      }); 
     });

使用System.Web.Script.Serialization; using System.Web.Script.Services;

[ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
     private string uploadPhoto() 
     { 
      string chkResult = "false"; 
      //upload photo code 
      string i = Request.Files.ToString(); 
      string ext = Path.GetExtension(Request.Files[0].FileName.ToString().ToLower()); 

      if (ext == ".png" || ext == ".jpg" || ext == ".gif" || ext == ".jpeg") 
      { 
       if (Request.Files[0].ContentLength <= 1024 * 1024 * 2) 
       { 
        if (File.Exists(Server.MapPath("UserImages") + "\\" + System.IO.Path.GetFileName(Request.Files[0].FileName))) 
         File.Delete(Server.MapPath("UserImages") + "\\" + System.IO.Path.GetFileName(Request.Files[0].FileName)); 

        Request.Files[0].SaveAs(Server.MapPath("UserImages") + "\\" + System.IO.Path.GetFileName(Request.Files[0].FileName)); 
        chkResult = "true"; 
       } 
       else 
       { 
        status_message.InnerHtml = "Please upload less than 2MB size."; 
        chkResult = "false"; 
       } 
      } 
      else 
      { 
       status_message.InnerHtml = "Please upload only png, jpg, jpeg or gif file."; 
       chkResult = "false"; 
      } 
      // Response.Close(); 
      // Response.End(); 
      //return chkResult; 
      var keyValues = new Dictionary<string, string> 
       { 
        { "success", "success" }, 
        { "error", "error" } 
       }; 

      JavaScriptSerializer js = new JavaScriptSerializer(); 
      string json = js.Serialize(keyValues); 
      //Response.Write(json); 
      return json; 

     }

我也嘗試過使用的webmethod和靜態uploadPhoto方法，但反應是一樣的。任何幫助表示讚賞。

來源

2013-05-07 user1684931

它適用於我。我在變量中實例化AjaxUpload，然後使用變量本身來調用提交文件的外部腳本。之後，我從AjaxUpload腳本中獲取輸入信息。

var btnUpload = $("#upload"); 
up_archive = new AjaxUpload(btnUpload, { 
    action: 'FileUpload.php', 
    name: 'upload_archive', 
    responseType: 'json', //get the server response as JSON 
    autoSubmit: false, //I'll set some informations about the archive outside this script 
    onChange: function(file, ext){ 
     //check the file size 
     if (up_archive._input.files[0].size > 2097152){ //2MB 
      //show alert message 
      alert('Selected file is bigger than 2MB.'); 
      return; 
     } 
    }, 
    onSubmit: function(file, ext){ 
     desc_archive = $("#desc_archive").val(); 

     this.setData({desc_archive: desc_archive}); //set a description for the archive to be uploaded 
    }, 
    onComplete: function(file, response){ 
     $("#desc_archive").val(''); 
     $("#div_response").html(response.message); 
    } 
});

來源

2014-09-19 14:37:30

如何使用ajaxupload3.5上傳照片時檢查文件大小

回答

相關問題