html:
复制代码 代码如下:
<input type="file" name="upload" hidden="hidden" id="file_upload" accept=".zip" />
js:
复制代码 代码如下:
$.ajaxFileUpload({
url:'${pageContext.request.contextPath}/Manage/BR_restorePic.action', //需要链接到服务器地址
secureuri:false,
fileElementId:'file_upload', //文件选择框的id属性
dataType: 'text', //服务器返回的格式，可以是json、xml
success: function (data, status) //相当于java中try语句块的用法
{
$('#restoreDialog').html(data)
//alert(data)
},
error: function (data, status, e){ //相当于java中catch语句块的用法
$('#restoreDialog').html("上传失败，请重试")
}
})
这个方法还会出现一个问题，就是input只能使用一次的问题，input第二次的onchange将不会被执行，这应该是与浏览器的有关，解决办法就是替换这个input
像这样：
复制代码 代码如下:
$('#file_upload').replaceWith('<input type="file" name="upload" hidden="hidden" id="file_upload" accept=".zip" />')
了解，fileuploader方法需要先初始化，然后才能触发上传，并不需要你手动触发change事件
你只需
html
<form>file : <input type="file" id="file" name="file">
</form>
js
$('#file').on('change' , function(){//这里可以做校验，返回false就不会触发下面的上传插件，否则就会触发上传
if(!this.value || this.value.indexOf('.jpg') == -1){
return false
}
})
//初始化上传插件
$('#file').fileupload({
autoUpload : true, //这里为true，则选中文件后就会自动上传
url : '',
done : $.noop,
fail : $.noop
})
html5uploader.js 兼容ie8方法如下：
拥有两个插件，一个是flash版本的uploadify，免费的。另一个是自己写的html5版本的，名叫html5uploader(好俗的名字。。)，再加一个适配器uploadadapter，用来决定在什么时候调用哪个插件。页面中只调用uploadadapter。关键的难题就在于，页面中的代码是只写一次的，不管是flash的还是html5的都得能识别出页面上的参数，这也就是我的山寨版本的插件做的事情，原flash版本的配置参数通通得识别并有效。幸好，已经实现了。
上demo
很多东西，一上demo就都清楚了。。。
[html] view plain copy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.uploadadapter.js"></script>
<script type="text/javascript" src="jquery.loadscript.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function(){
$('#upload').uploadadapter({
fileTypeExts:'*.jpg*.png',
auto:false,
showUploaded:true,
baseurl:'.',//当前目录
multi:true,
removeTimeout:9999999,
uploadurl:'upload.php'
})
})
</script>
</head>
<body>
<input type="file" name="file" id="upload" />
</body>
</html>
ie8下调用flash
firefox、chrome下调用html5
略有差异，ie8下圆角没了。。。如果不喜欢这个样式呢，就请打开css文件自己修改吧。
很简单的调用，可以看到在页面中使用的是uploadadapter，由它来决定调用哪个插件。俩个插件所需要的js文件和css文件都是异步引入的，此处用到一个小插件loadScript。参数没有写全，可以自己看源代码的注释~
uploadadapter中的调用情况是我需要的配置，你也可以随意修改。
四、相关文件注释
在此把文件夹中的文件做一个简要介绍：
/html5uploader html5上传插件，你也可以拿来单独使用
/uploadify3.2 flash上传插件，也可以拿来单独使用
/uploads 存放上传的文件
/jquery.loadScript.js 用于异步引入脚本的小插件
/jquery.uploadadapter.js 适配器，用来判断客户端类型，动态调用上传插件
/upload.php 后台处理程序，最基本的
五、上源码，注释很全哦
http://download.csdn.net/detail/never_say_goodbye/5090639六、一个bug！！
很重的哦，我之前给疏漏了，在这里说一下，文件就不重新上传了
在jquery.html5uploader.js的158和164行，将$('.uploadify-progress')改为$('#'+file.index).fnd('.uploadify-progress')，否则上传多个文件会混淆。
