ajaxupload3.5를 사용하여 사진을 업로드 할 때 파일 크기를 확인하는 방법

Question

여기에서 해결책을 사용하여 ajaxuploader를 업로드하고 변경하는 사용자 사진 : http://www.c-sharpcorner.com/blogs/4183/upload-image-by-ajax-uploader-with-jquery.aspx 아래 코드는 제대로 작동하지만 파일 크기를 확인하는 방법을 모르겠습니다. 클라이언트 측 또는 (클라이언트 측에서 가능하지 않은 경우) 서버 측에서 응답을 얻는 방법. 아래 mycode에서 응답 ID는 전체 페이지의 HTML입니다.

<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; 
       } 
      }); 
     }); 

using 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 메서드를 사용하려고했지만 응답은 동일합니다. 도움을 주시면 감사하겠습니다.

Answer 1

나를 위해 작동합니다. 변수에서 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); 
    } 
});