文件上传与进程栏使用Iframe为IE

file upload With Process bar using Iframe for IE

本文关键字:Iframe IE 进程 文件      更新时间:2023-09-26

我写了一个代码来上传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上传器的特性请求中有更详细的说明。