我正在使用ajaxuploader来使用此处的解决方案上传和更改用户照片：http://www.c-sharpcorner.com/blogs/4183/upload-image-by-ajax-uploader-with-jquery.aspx 下面的代码工作正常，但我不知道如何在客户端检查文件大小或（如果在客户端不可能）如何从服务器端获取响应。在下面的mycode中，响应标识整个页面的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和static uploadPhoto方法，但响应是一样的。 任何帮助表示赞赏。
答案 0 :(得分：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);
}
});