Atitit .h5文件上传 v3
1. 上传原理1
2. V3版新特性1
3. Html1
4. Js2
5. uploadV2.js2
6. upServlet ＆ FileUploadService {3
7. 注意：：去除struts的干扰3
8. 参考4
1. 上传原理
FormData + apache io
2. V3版新特性
组件化 ，使用了obj_selector
修正v2版bug
范例 person_info_edit .html用户信息头像修改
3. 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/
4. Js
导入 uploadV3.js
<script defer>
var saveDir="00upQ4";
saveDir=encodeURIComponent(saveDir);
uploadSrv=new AtiUploadV3("#userHeadImage");
uploadSrv.up_url=$approot+"/upServlet?savepath="+saveDir;
uploadSrv.upload_finish_handler=function(data){
data=data.trim();
console.log("upload_finish_handler:"+ data);
console.log("上传结束返回结果:"+data);
$("#thumb").val(data);
//图片本地预览
var url=getPicSrc4createObjectURL("userHeadImage");
console.log(url);
$("#headImage").attr("src",url);
};
</script>
5. 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();
}
});
}
6. upServlet ＆ FileUploadService {
7. 注意：：去除struts的干扰
当项目有ｓｔｒｕｔｓ框架，配置了监控所有的url ／＊的时候 （默认）。。会获取不到数据，需要去除ｓｔｒuts的干扰
<constant name="struts.action.excludePattern" value="/upServlet,
8. 参考
Pinnge p2.html
D:\wamp\www\lime\com.attilax\io
