Atitit .h5文件上传
1. 上传原理1
2. Html1
3. Js2
4. uploadV2.js2
5. upServlet ＆ FileUploadService { 3
6. 注意：：去除struts的干扰3
7. 参考3
1. 上传原理
FormData + apache io
2. Html
<script type="text/javascript" src="../com.attilax/io/uploadV2.js">
<input id="filex" type="file" name="fileField" style="display:nonex" οnchange="uploadSrv.upload()"/>
<div id="uppic_btn" name="btn" type="button" style=" margin-top:0px ; height:30px ; background-color:#0AEAFD " οnclick="custom_browserBtn_click();" >浏览按钮
<!-- process bar q414 add recomm-->
<div id="process_div"></div>
</div>
作者:: ★(attilax)>>> 绰号:老哇的爪子 （ 全名：：Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿尔 拉帕努伊 ） 汉字名：艾龙， EMAIL:1466519819@qq.com
转载请注明来源： http://www.cnblogs.com/attilax/
3. Js
<script defer>
// $app_path="/lime"; for test
var saveDir="00upQ4";
saveDir=encodeURIComponent(saveDir);
var uploadSrv=new AtiUpload();
uploadSrv.up_url=$approot+"/upServlet?savepath="+saveDir;
uploadSrv.upload_finish_handler=function(data){
alert("上传结束返回结果:"+data);
};
function custom_browserBtn_click()
{
$("#filex").click();
}
</script>
4. uploadV2.js
// JavaScript Document
function AtiUpload()
{
this.up_url;
this.upload_finish_handler;
}
AtiUpload.prototype. upload=function()
{
var self=this;
try{
$("#process_div").progressBar(99);
}catch(e){
console.log(e);
}
var fd = new FormData();
//fd.append("upload", 1);
fd.append("upfile", $("#filex").get(0).files[0]);
$.ajax({
url: this.up_url,
type: "POST",
processData: false,
contentType: false,
data: fd,
success: function(d) {
console.log(d);
console.log("----fini");
//$("#file_val").val(d);
// writeCookie("file_url_frmJS",$("#file_val").val(),10);
self.upload_finish_handler(d);
upload_finish();
}
});
}
5. upServlet ＆ FileUploadService {
6. 注意：：去除struts的干扰
当项目有ｓｔｒｕｔｓ框架，配置了监控所有的url ／＊的时候 （默认）。。会获取不到数据，需要去除ｓｔｒuts的干扰
<constant name="struts.action.excludePattern" value="/upServlet,
7. 参考
Pinnge p2.html
D:\wamp\www\lime\com.attilax\io