文件上传与进程栏使用Iframe为IE
file upload With Process bar using Iframe for IE
我写了一个代码来上传IE使用Iframe来做它的工作的文件。上传就完成了。但是我想要一个processbar但是我不知道该怎么做请,请帮助。
function fileUpload(form, action_url, div_id) {
// Create the iframe...
var iframe = document.createElement("iframe");
iframe.setAttribute("id", "upload_iframe");
iframe.setAttribute("name", "upload_iframe");
iframe.setAttribute("width", "0");
iframe.setAttribute("height", "0");
iframe.setAttribute("border", "0");
iframe.setAttribute("style", "width: 0; height: 0; border: none;");
//target = "#fileIframe"
// Add to document...
form.parentNode.appendChild(iframe);
window.frames['upload_iframe'].name = "upload_iframe";
iframeId = document.getElementById("upload_iframe");
// Add event...
var eventHandler = function () {
if (iframeId.detachEvent) {
iframeId.detachEvent("onload", eventHandler);
// $('#progressNumber').text("100%");
}
else iframeId.removeEventListener("load", eventHandler, false);
// if (iframeId.addEventListener) iframeId.removeEventListener("progress", uploadProgress1, false);
// Message from server...
if (iframeId.contentDocument) {
content = iframeId.contentDocument.body.innerHTML;
} else if (iframeId.contentWindow) {
content = iframeId.contentWindow.document.body.innerHTML;
} else if (iframeId.document) {
content = iframeId.document.body.innerHTML;
}
document.getElementById(div_id).innerHTML = content;
// Del the iframe...
setTimeout('iframeId.parentNode.removeChild(iframeId)', 250);
}
if (iframeId.addEventListener) {
iframeId.addEventListener("load", eventHandler, true);
// $('#progressNumber').text("Processing...");
}
if (iframeId.attachEvent) iframeId.attachEvent("onload", eventHandler);
// Set properties of form...
form.setAttribute("target", "upload_iframe");
form.setAttribute("action", action_url);
form.setAttribute("method", "post");
form.setAttribute("enctype", "multipart/form-data");
form.setAttribute("encoding", "multipart/form-data");
// Submit the form...
form.submit();
document.getElementById(div_id).innerHTML = "Uploading...";
}
function fileSelectedIE() {
var fullname = $('#fileToUpload').val().toString();
var IndexExt = fullname.lastIndexOf(".");
var ext = fullname.substr(IndexExt + 1).toString();
var IndexFileName = fullname.lastIndexOf("''");
var FileName = fullname.substring(IndexFileName+1, IndexExt).toString();
document.getElementById('fileName').innerHTML = 'Name: ' + FileName;
document.getElementById('fileSize').innerHTML = 'Size: Not Support';
document.getElementById('fileType').innerHTML = 'Type: ' + ext;
}
<input type="file" name="fileToUpload[]" id="fileToUpload" onchange="fileSelectedIE()" /></br>
<input type="button" value="upload" onClick="fileUpload(this.form,'UploadHandler.ashx','upload'); return false;"/>
<div id="fileName">
</div>
<div id="fileSize">
</div>
<div id="fileType">
</div>
<div id="progressNumber">
</div>
上传文件时如何创建进程栏?
在支持file API的用户代理中跟踪文件上传进度非常容易。不幸的是,IE9和更早的版本没有。如果没有文件API支持,您将无法(轻松地)跟踪文件上传进度。这是,从理论上讲,可能通过FileUpload模块为nginx或apache。这在我维护的一个javascript上传器的特性请求中有更详细的说明。
相关文章:
- 从一个iframe到另一个ifame的过帐表单-IE
- 使用YouTube iFrame API的IE中的JavaScript问题
- 将IE模拟模式从iframe覆盖到IE8
- Iframe加载调整大小在Chrome中工作,但不能在IE或Firefox中工作
- JavaScript调整iFrame大小-适用于Firefox/IE,但不适用于Chrome
- 没有在带有IE-FF的IFrame中运行的脚本是可以的
- 从父页面调用iframe中的javascript,IE问题
- 占位符属性嵌入IE中的iframe时不起作用
- 可以't使用iframe获取占位符属性以在IE中工作
- 在IE中显示iframe中的blob失败
- jsPDF在任何IE版本中显示iframe
- 为什么IE不支持在现有应用程序中使用的iFrame js和css文件
- 在插入符号 (IE) 处将 HTML 插入 iFrame 中
- 放大iframe内在IE和谷歌浏览器上不起作用的图像
- 页面上有多个 iframe - 只有 IE 会正确更改另一个框架
- iframe上的onload事件在IE和Firefox / GoogleChrome中的工作方式不同
- 关闭包含YouTube电影的Fancybox-iframe时出现IE JS错误
- 无法访问 IE 中的 iframe 内容
- JS Submit() 访问被拒绝 IFrame IE.
- 使用即时生成的PDF打印Iframe IE 11