Ajax Style File Uploading using Hidden iFrame

最新推荐文章于 2021-08-05 23:01:19 发布

iteye_3662

最新推荐文章于 2021-08-05 23:01:19 发布

阅读量85

点赞数

分类专栏： javascript 文章标签： php javascript ViewUI

本文链接：https://blog.csdn.net/iteye_3662/article/details/82448475

版权

javascript 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

<html>
 
<script language="Javascript">
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;");
 
    // 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);
            else iframeId.removeEventListener("load", eventHandler, 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);
    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...";
}
</script>
 
<!-- index.php could be any script server-side for receive uploads. -->
<form>
<input type="file" name="datafile" /></br>
<input type="button" value="upload"
        onClick="fileUpload(this.form,'index.php','upload'); return false;" >
<div id="upload"></div>
</form>
 
</html>

原文链接: http://viralpatel.net/blogs/ajax-style-file-uploading-using-hidden-iframe/

iteye_3662

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax Style File Uploading using Hidden iFrame

&lt;html&gt; &lt;script language="Javascript"&gt;function fileUpload(form, action_url, div_id) { // Create the iframe... var iframe = document.createElement("iframe"); iframe.s...
复制链接

扫一扫