[英]ASP FileUpload with secondary iFrame submit only works once per page refresh
My goal is to get an file upload working on my web part using JS, jQuery and an iFrame so as to not require a page refresh. 我的目标是使用JS,jQuery和iFrame在我的Web部件上进行文件上传,以免刷新页面。 Here is my code
这是我的代码
in ASP HTML page 在ASP HTML页面中
<div class="DocumentUploader" id="DocumentUploader" style="position:relative">
<div style="position:absolute; top:4px; left:6px"><asp:Literal runat="server" ID="litMultiChoiceDropDocument"></asp:Literal></div>
<asp:FileUpload runat="server" ClientIDMode="Static" ID="fuMultiChoiceAddDocuments" AllowMultiple="true" onchange="DDPutDocument(); btnMultiChoiceAddDocuments.click()" BorderStyle="None" Width="100%" BackColor="Transparent" Style="padding:0px 0px 0px 0px; opacity:0; cursor:pointer" />
<asp:Button runat="server" ClientIDMode="Static" ID="btnMultiChoiceAddDocuments" OnClick="btnMultiChoiceAddDocuments_Click" Style="display:none" />
</div>
and in Javascript 和在Javascript中
var hiddenIFrameID = "hiddenUploader";
function DDPutDocument() {
var iframe = document.createElement("iframe");
iframe.id = hiddenIFrameID;
iframe.style.display = "none";
document.body.appendChild(iframe);
document.getElementById("aspnetForm").target = hiddenIFrameID;
docsRefreshed = false;
DDRefreshDocuments();
}
var docsRefreshed = false;
function DDRefreshDocuments() {
if (!docsRefreshed) {
DDLoadDocuments();
setTimeout(DDRefreshDocuments, 2500);
}
else {
var iframe = document.getElementById(hiddenIFrameID);
document.body.removeChild(iframe);
document.getElementById("aspnetForm").removeAttribute("target");
}
}
Walkthrough - 演练-
The FileUpload
onchange
event is triggered from the popup file dialog or from a file being dragged onto the FileUpload
input. FileUpload
onchange
事件是从弹出文件对话框或拖动到FileUpload
输入上的文件触发的。 - works -作品
The onchange
method calls the javascript method first DDPutDocument
and then invokes btnMultiChoiceAddDocuments.click()
. onchange
方法首先调用javascript方法DDPutDocument
,然后调用btnMultiChoiceAddDocuments.click()
。 - works -作品
The DDPutDocument
method creates an iFrame and assigns the target of the first form to be the iFrame, so that a submit action on the form will submit the iFrame, not the form. DDPutDocument
方法创建一个iFrame,并将第一个表单的目标分配为iFrame,以便对该表单的提交操作将提交iFrame,而不是表单。
The btnMultiChoiceAddDocuments.click()
event submits the form, which is actually submitting the iFrame, and some codebehind for the button takes the file and saves it. btnMultiChoiceAddDocuments.click()
事件提交表单,该表单实际上是在提交iFrame,并且按钮后面的一些代码获取文件并保存。
The DDRefreshDocuments
method is called elsewhere, and it is being called correctly, the else
statement in the method also gets called correctly and so should be handling my cleanup. DDRefreshDocuments
方法在其他地方被调用,并且被正确调用,该方法中的else
语句也被正确调用,因此应该处理我的清理工作。
The problem - 问题 -
This all works brilliantly for the first instance of uploading a file after the page load, the JS method executes, the button click event triggers a submit on the iFrame and the file is handled by the codebehind. 对于页面加载后上载文件的第一个实例,JS方法执行,按钮单击事件触发iFrame上的提交,并且文件由背后的代码处理,这一切都很好。 When trying to upload a second file the JS method executes with no errors, carries into an infinite loop with attempting to refresh a list of documents (because the upload didn't work), but does not upload the file.
尝试上载第二个文件时,JS方法无错误执行,并进入无限循环,尝试刷新文档列表(因为上载不起作用),但不上载文件。 Neither the
btnMultiChoiceAddDocuments_Click
event or the Page_Load
event fire as they did in the first upload instance. btnMultiChoiceAddDocuments_Click
事件或Page_Load
事件均不会像在第一个上传实例中那样触发。 The page needs to be reloaded in order to work again. 该页面需要重新加载才能再次工作。
Ran into this same problem. 遇到同样的问题。 For me it had to do with the cache.
对我来说,它与缓存有关。 How I fixed it was to return a value from the server after uploading.
我如何解决的是上传后从服务器返回值。 This will refresh the server code.
这将刷新服务器代码。 Or you can set the no-cache to the server back end.
或者,您可以将无缓存设置为服务器后端。
This is my code behind inside a webapi(not sure if youre using a webapi, but you can get some ideas) 这是我在webapi内的代码(不确定您是否使用webapi,但可以得到一些想法)
public HttpResponseMessage Post([FromUri] FileAttachmentInfo fileAttachmentInfo) { //need to add user credential security here if (Request.Content.IsMimeMultipartContent()) { HttpResponseMessage theResponse = null; public HttpResponseMessage Post([FromUri] FileAttachmentInfo fileAttachmentInfo){//如果(Request.Content.IsMimeMultipartContent()){HttpResponseMessage theResponse = null;
string filepath = HttpContext.Current.Server.MapPath(ConfigurationManager.AppSettings["DCProfileFilePath"]);
filepath += fileAttachmentInfo.DCId + "\\" + fileAttachmentInfo.Tab + "\\" + fileAttachmentInfo.Field + "\\" + fileAttachmentInfo.File;
//delete previous files and create File Path folder if not already created
DeleteAndCreateFilePath(filepath);
MyMultipartFormDataStreamProvider streamProvider = new MyMultipartFormDataStreamProvider(filepath);
var task = Request.Content.ReadAsMultipartAsync(streamProvider).ContinueWith(t =>
{
if (t.IsFaulted || t.IsCanceled)
throw new HttpResponseException(HttpStatusCode.InternalServerError);
var fileInfo = streamProvider.FileData.Select(i =>
{
var info = new FileInfo(i.LocalFileName);
//return "File uploaded as " + info.FullName + " (" + info.Length + ")";
return info.Name;
});
return fileInfo;
});
// wait for task to complete. Not really async, is it?!
task.Wait();
// remove annoying header
theResponse.Content.Headers.Remove("Content-Disposition");
return theResponse;
}
else
{
throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotAcceptable, "Invalid Request!"));
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.