<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,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
•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...
Uploading and Downloading Files in Web Dynpro Java
在 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
Uploading Desktop
化妆品工艺.pptx.baiduyun.uploading.cfg
Using Fragments in New Applications Targeting Older Platforms 259 Linking the Android Support Package to Your Project 260 Exploring Nested Fragments 261xviii Contents Summary 261 Quiz Questions 262 ...
Uploading a file to a remote server 66 Caching content using the web storage local storage API 70 Chapter 3: Working with Audio, Images, and Video 79 Introduction 79 Capturing audio using the devices ...
You'll also learn about creating secure web applications using different methods such as file uploading and processing, making RESTful AJAX requests, and form processing. If you want to take advantage...
Ajax图片上传带缩略图源码 程序带有图片上传 综合管理(添加 删除 图片配备文字信息) 数据库为SQL2005 放置在DB文件夹下 ------------------------------------分割线-------------------------------------- 问题...
泛微附件上传失败问题排查
jquery.ajax.progress 允许将事件处理程序绑定到 XHR2 上传/下载进度事件。 基于 nebirhos 脚本 ( ) 这些事件是: downloading和uploading downloading事件的示例代码: var jqXHR = $ . get ( '...
自述文件该自述文件通常会记录启动和运行应用程序所需的所有步骤。 您可能要讲的内容: Ruby版本系统依赖配置数据库创建数据库初始化如何运行测试套件服务(作业队列,缓存服务器,搜索引擎等) 部署说明...
file.io实用程序在您的终端上使用临时文件共享服务!... 基本上,唯一的可选参数是有效期限,例如./fileio -e 1m somefile.png例子输入: ./fileio somefile.png输出: Uploading to file.io...Link:
Testing uploading for a file/ A litlle
Uploading and Viewing Files the Easy Way
Updating an element based on a form using Ajax and MooTools 164 Providing an Ajax response from a component 166 Enabling pagination in a list of items 169 Chapter 7: Customizing the Document 173 ...
beforefileuploadstart - fires when file as about to start uploading: dialog - reference to dialog filename - uploaded file name record - file record If handler returns false then file upload will be ...