类似ajax文件下传功能 其一（只针对同一个页面只有一个下传功能）
日期：2014-05-16 浏览次数：20886 次
类似ajax文件上传功能 其一（只针对同一个页面只有一个上传功能）
写了一个简单的类似ajax上传文件的功能，原理当然不是真正的通过ajax方式上传，而是利用iframe来做的
这是其中的一种写法：
先来分析一下原理，利用js来创建一个iframe，这个iframe的src指向一个静态页面。这个静态页面当中有一个Form表单
进行提交。后台提交成功后让其运行一个父窗口的js函数，并返回上传成功的文件路径、
?
先来看js，由于有一些参数是可变的，所以代码上有些混杂.(程序当中为方便，用到了jquery框架)
?
var Upload = {};
Upload = {
formId:"D_upload_form",
imgURL : "http://www.xxxx.com:8080/img",
action : "/img/upload.htm",
currentFilePath:null,
allFilePath:new Array(),
imgPreDiv:null,
uploadInfo:null,
checkType:2,//默认检测类型为图片格式
imgTemplate:null, //图片显示模板格式
maxNum:5, //最大上传数量
hasUploadNum:0,//已经上传的数量
/**
* 如果需要修改默认参数调用此方法.
*/
setting:function(uploadURL, upladAction, checkType) {
Upload.imgURL = uploadURL || Upload.imgURL;
Upload.action = upladAction || Upload.action;
Upload.checkType = checkType || Upload.checkType;
},
/**
* 创建文件上传
* @param fileID 当前file控件ID
* @param imgListDivId 如果是图片,则可设置图片上传完成后显示的缩略图的位置
* @param infoId 提示用户正在上传的信息所在的标签ID
* @param imgTemplate 图片上传后显示的的格式模板,程序根据此模板自动生成后续的图片样式
*/
createUpload:function(fileID, imgListDivId, infoId, imgTemplate) {
if (typeof($) != "function") {
alert("请导入jquery1.2.6以上版本JS文件");
return;
}
var fileInput = $("#" + fileID);
var iframeWidth = fileInput.parent().css("width") || "250";
var iframeHeight = fileInput.parent().css("height") || "30";
var html = "<iframe frameborder='0' id='D_upload_iframe' scrolling='no' src='" + Upload.imgURL
+ "/html/upload.html' width='" + iframeWidth + "' height='" + iframeHeight + "'></iframe>";
fileInput.parent().html(html);
if (imgListDivId != null || imgListDivId != "") {
Upload.imgPreDiv = $("#" + imgListDivId);
}
if (infoId != null || infoId != "") {
Upload.uploadInfo = $("#" + infoId);
}
if (imgTemplate != null || imgTemplate != "") {
Upload.imgTemplate = $("#" + imgTemplate).html();
}
},
/**
* 供后台程序调用，设置当前上传成功的文件路径
* @param path 上传后的路径
*/
setFilePath:function(path) {
Upload.currentFilePath = path;
Upload.allFilePath.push(path);
//var img = "<img src='" + path + "' alt='上传的图片,可删除'/>";
var img = Upload.imgTemplate.replace("src=\"\"", "src=\"" + path + "\"");
if (Upload.imgPreDiv != null) {
Upload.imgPreDiv.append(img);
}
history.back();
Upload.uploadInfo.hide();
},
/**
* 供后台程序调用，当上传出现错误时弹出错误提示框
* @param error 错误信息
*/
uploadError:function(error) {
alert(error);
history.back();
Upload.uploadInfo.hide();
},
/**
* 获取当前上传的文件路径
*/
getFilePath:function() {
return Upload.currentFilePath;
},
/**
* 显示正在上传信息
*/
showUploadInfo:function() {
Upload.uploadInfo.show();
}
};
上面的JS?方法基本没什么可说的，通过获取当前页面当中的一个input对象，将其替换成一个iframe并保留一些参数
?
?
下面来看iframe静态页面内容：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html;chartset=utf-8"/>
</head>
<body style="padding:0;">
<form style="padding:0;" method="post" action="" enctype="multipart/form-data">
<input type="file" name="fileName" onchange="listernInputChange(this,this.form);"/>
</form>
</body>
<script type="text/javascript">
function iframeLoad() {
if (parent.Upload == null || parent.Upload == "undefined") {
alert("您的设置可能问题,或访问了不该的页面!");
history.back();
} else {
document.forms[0].action = parent.Upload.
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
