Atitit .h5文件上传

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