Question

我编写代码为IE上传文件使用Iframe来做它的工作。只需上传完成。但是我想要一个流程栏但是我不知道该怎么办请帮助。

       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>

上传文件时如何创建处理栏？

Answer 1

在支持File API的用户代理中跟踪文件上载进度非常容易。不幸的是，IE9及更早版本没有。如果没有File API支持，您将无法（轻松）跟踪文件上载进度。从理论上讲，它可以通过FileUpload模块实现nginx或apache。对于我维护的javascript上传程序，详细信息请参见a feature request。

文件上传使用iframe进行IE的进度条

1 个答案: