0

我正在使用 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;
                 }
             });
         });

使用 System.Web.Script.Serialization；使用 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 方法，但响应是一样的。任何帮助表示赞赏。

4

1 回答 1

2

这个对我有用。我在一个变量中实例化 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-19T14:37:30.757 回答