`
Blackbaby
  • 浏览: 183839 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

Ajax Style File Uploading using Hidden iFrame

 
阅读更多

<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/
分享到:
评论

相关推荐

    前端项目-jquery.iframe-transport.zip

    前端项目-jquery.iframe-transport,jQuery plugin that implements an iframe transport so that ajax calls support the uploading of files using standard HTML file input fields

    file-uploading-with-php-and-mysql.rar_file upload_truth5fw

    标题中的“file-uploading-with-php-and-mysql.rar_file upload_truth5fw”暗示了这是一个关于使用PHP和MySQL实现文件上传功能的教程或代码示例。PHP是一种广泛使用的服务器端脚本语言,尤其适合Web开发,而MySQL是...

    ajax实现图片上传

    echo "Sorry, there was an error uploading your file."; } } ?&gt; ``` ### 总结 通过上述内容的学习,我们了解了如何利用Ajax技术实现图片上传的功能,包括前端页面的设计、图片预览功能的实现、以及具体的Ajax...

    php+ajax文件上传

    echo json_encode(["error" =&gt; "Sorry, there was an error uploading your file."]); } } ?&gt; ``` 5. **安全考虑**: 在实际应用中,应确保对上传的文件进行严格的验证,避免恶意文件的上传。这包括检查文件...

    PHP+jQuery+Ajax多图片上传

    echo "Sorry, there was an error uploading your file."; } ?&gt; ``` ### 5. 实时预览和进度条 plupload提供了实时预览图片和显示上传进度的功能。通过监听`FileUploaded`事件,我们可以将上传成功的图片URL添加到...

    精简的ajax上传

    console.error('Error uploading file:', textStatus, errorThrown); } }); ``` 在这个例子中,我们创建了一个`FormData`对象,将用户选择的文件添加到其中,然后通过Ajax发送。`xhr.upload.progress`事件监听...

    jquery form ajax 插件

    alert("Error uploading file: " + error); } }); ``` 五、注意事项 1. 为了确保文件上传正常,需要在表单中设置`enctype="multipart/form-data"`。 2. 由于跨域限制,AJAX请求可能受到CORS策略的影响,服务器端...

    SWFUpload jwplayer

    •AJAX-style uploading without a page refresh. •Upload progress events. •Namespaced classes compatible with other JavaScript libraries (i.e., jQuery, Prototype, etc.). •Flash 9 and Flash 10 support...

    Jquery Ajax 图片上传

    在Web开发中,jQuery AJAX是一种常用的技术,用于在不刷新整个页面的情况下与服务器进行异步数据交换。在本文中,我们将深入探讨如何使用jQuery AJAX实现图片上传功能,同时结合无刷新预览和加载指示器(Loading)...

    jquery+ajax+net上传文件

    console.error('Error uploading file:', error); } }); }); }); ``` 这段代码中,`#uploadButton`是触发文件上传的按钮,当点击时,选取的文件会被添加到`FormData`对象中,并通过AJAX POST请求发送到服务器端...

    ajax无刷新文件上传

    echo json_encode(["error" =&gt; "Sorry, there was an error uploading your file."]); } } ?&gt; ``` **4. 错误处理与进度条** - `ajaxfileupload.js` 提供了`success`和`error`回调函数,可以用来处理上传成功...

    Uploading and Downloading Files in Web Dynpro Java

    ### SAP NetWeaver 04 Web Dynpro Java:文件上传与下载 #### 一、概述 在企业级应用开发中,文件的上传与下载是非常常见的功能...未来还可以探索更多高级特性,例如使用AJAX实现无刷新上传等,进一步增强用户体验。

    从javascript编写者角度讲解ajax的原理

    - **IFrame (Inline Frame)**: 早期实现AJAX的一种方法,通过内联框架发送请求。缺点是会生成大量无用的IFrame。 - **Data-Uploading Hack**: 一种用于上传数据的技巧,但存在安全性问题。 - **XMLHttpRequest**: ...

    uploading-file-in-sails:在 Sails 中上传文件

    在 Sails 中上传文件Sails 使用skipper上传文件如何使用此代码git clone https://github.com/maangalabs/uploading-file-in-sails.gitcd uploading-file-in-sailssudo npm installsails lift转到...

    化妆品培训材料.pptx.baiduyun.uploading.cfg

    化妆品培训材料.pptx.baiduyun.uploading.cfg

    Uploading Desktop

    Uploading Desktop

    ext上传uploading

    标题“ext上传uploading”指的是基于EXTJS框架的文件上传功能。EXTJS是一个强大的JavaScript库,主要用于构建富客户端应用程序,其强大的组件模型使得创建复杂的Web界面变得简单。在这个场景中,“uploading”意味着...

    化妆品工艺.pptx.baiduyun.uploading.cfg

    化妆品工艺.pptx.baiduyun.uploading.cfg

Global site tag (gtag.js) - Google Analytics