Atitit .h5文件上传 v3

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" onchange="uploadSrv.upload()"/>

<div id="uppic_btn" name="btn" type="button" style=" margin-top:0px ; height:30px ; background-color:#0AEAFD " onclick="custom_browserBtn_click();" >浏览按钮

<!-- process bar q414 add recomm-->

<div id="process_div"></div>

</div>

作者:: ★(attilax)>>> 绰号:老哇的爪子 （ 全名：：Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿尔 拉帕努伊 ） 汉字名：艾龙， EMAIL:1466519819@qq.com

转载请注明来源： http://blog.csdn.net/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