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:wampwwwlimecom.attilaxio