我有一个用ASP.NET MVC编写的网站，有一个页面用户可以创建一个小文章。他们可以选择一张图片添加到这篇文章中。我有一个上传图像的页面，在创建文章页面简单地列出它们。但很多人抱怨他们在意识到没有上传需要的图片之前已经写了整篇文章。我想让用户能够从创建文章页面上传一张图片，然后重新加载我的下拉列表以供选择。
我考虑在页面上制作一个单独的多部分表单，让用户在那里选择文件（基本上使用现有的上传功能）。但我该如何提交异步请求？如何异步重新呈现我的图片列表?
我该如何使用jquery/ajax上传这个图像，然后重新填充我的下拉列表?
/谢谢
我已经多次使用过这个jQuery插件。
我将上传按钮放在了一个jQuery UI模态对话框中，该对话框使用了PopupImageUploader元素。
<div id="PopupImageUploader" title="Upload Image">
<div id="uploaderFile"></div>
</div>
我的 JavaScript 会在元素 upladerFile 上构建上传器。
function CreateImageUploader() {
var uploader = new qq.FileUploader({
element: $('#uploaderFile')[0],
template: '<div class="qq-uploader">' +
'<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' +
'<div class="qq-upload-button ui-button ui-widget ui-corner-all ui-button-text-only ui-state-default">Seleziona il Listino Excel</div>' +
'<ul class="qq-upload-list"></ul>' +
'</div>',
hoverClass: 'ui-state-hover',
focusClass: 'ui-state-focus',
action: 'Home/UploadImage',
allowedExtensions: ['jpg', 'gif'],
params: { },
onSubmit: function(file, ext) {
},
onComplete: function(id, fileName, responseJSON) {
$("#PopupImageUploader").dialog('close');
}
}
});
}
params: { } 属性中指定的额外参数。
这是我的控制器： [HttpPost()]
public System.String UploadImage(string id)
{
bool IsIE = false;
string sFileName = "";
var TempFolder = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "_TEMP");
if ((Request.Files == null) || (Request.Files.Count == 0))
{
if (string.IsNullOrEmpty(Request.Params["qqfile"]))
{
return ("{success:false, error:'request file is empty'}");
}
else
{
sFileName = Request.Params["qqfile"].ToString();
}
}
else
{
sFileName = Request.Files[0].FileName;
IsIE = true;
}
if (string.IsNullOrEmpty(sFileName))
{
return ("{success:false, error:'request file is empty'}");
}
string DocumentName = id + Path.GetExtension(sFileName);
if (IsIE)
{
try
{
Request.Files[0].SaveAs(Path.Combine(TempFolder, DocumentName));
}
catch (Exception ex)
{
return ("{success:false, error:'" + ex.Message + "'}");
}
}
else
{
try
{
if ((Request.InputStream != null) && (Request.InputStream.CanRead) && (Request.InputStream.Length > 0))
{
using (FileStream fileStream = new FileStream(Path.Combine(TempFolder, DocumentName), FileMode.Create))
{
byte[] FileBytes = new byte[Convert.ToInt32(Request.InputStream.Length) + 1];
Int32 bytesRead = 0;
bytesRead = Request.InputStream.Read(FileBytes, 0, FileBytes.Length);
fileStream.Write(FileBytes, 0, bytesRead);
fileStream.Flush();
fileStream.Close();
}
}
}
catch (Exception ex)
{
return ("{success:false, error:'" + ex.Message + "'}");
}
}
var newFileName = "new assigned filename";
return ("{success:true, newfilename: '" + newFileName + "'}");
}
由于IE的行为不同，因此我有两个不同的过程来读取文件。
<input type="file" id="picfile" name="picf" />
<input type="text" id="txtName" style="width: 144px;" />
$("#btncatsave").click(function () {
var Name = $("#txtName").val();
var formData = new FormData();
var totalFiles = document.getElementById("picfile").files.length;
var file = document.getElementById("picfile").files[0];
formData.append("FileUpload", file);
formData.append("Name", Name);
$.ajax({
type: "POST",
url: '/Category_Subcategory/Save_Category',
data: formData,
dataType: 'json',
contentType: false,
processData: false,
success: function (msg) {
alert(msg);
},
error: function (error) {
alert("errror");
}
});
});
[HttpPost]
public ActionResult Save_Category()
{
string Name=Request.Form[1];
if (Request.Files.Count > 0)
{
HttpPostedFileBase file = Request.Files[0];
}
}