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://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的干扰

当项目有struts框架,配置了监控所有的url  /*的时候 (默认)。。会获取不到数据,需要去除struts的干扰

<constant name="struts.action.excludePattern" value="/upServlet,

8.  参考

Pinnge p2.html

D:\wamp\www\lime\com.attilax\io

Atitit .h5文件上传 v3的更多相关文章

  1. Atitit .h5文件上传

    Atitit .h5文件上传 1. 上传原理1 2. Html1 3. Js2 4. uploadV2.js2 5. upServlet & FileUploadService {3 6. 注 ...

  2. Java实现文件上传

    最近自己在做一个小系统玩的时候涉及到了文件的上传,于是在网上找到Java上传文件的方案,最后确定使用common-fileupload实现上传操作. 需求说明 用户添加页面有一个“上传”按钮,点击按钮 ...

  3. 文件上传--基于Spring MVC框架+SmartUpload

    这篇文章是介绍文件上传的,由于在spring MVC上实现起来和直接在servlet中写有些不同,所以特地写了一下这篇文章,关于不同点,大家可以先阅读一下上一篇文章.好了,下面直接上代码. jab包是 ...

  4. Java实现文件上传-按钮弹出上传页面

    转自: https://blessht.iteye.com/blog/1405057 最近自己在做一个小系统玩的时候涉及到了文件的上传,于是在网上找到Java上传文件的方案,最后确定使用common- ...

  5. Atitit..文件上传组件选型and最佳实践总结(3)----断点续传控件的实现

    Atitit..文件上传组件选型and最佳实践总结(3)----断点续传控件的实现 1. 实现思路:::元插件,元设置... 1 2. 实现流程downzip,unzip,exec 1 3. Zip  ...

  6. Atitit..文件上传组件选型and最佳实践总结(2)----断点续传

    Atitit..文件上传组件选型and最佳实践总结(2)----断点续传 1. 断点续传的原理 1 2. 如何判断一个插件/控件是否支持断点续传?? 1 3. 常用的组件选型结果::马 1 4. 自定 ...

  7. atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

    atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...

  8. Atitit..文件上传组件选择and最佳实践的总结(2)----HTTP

    Atitit..文件上传组件选型and最佳实践总结(2)----断点续传 1. 断点续传的原理 1 2. 怎样推断一个插件/控件是否支持断点续传?? 1 3. 经常使用的组件选型结果::马 1 4.  ...

  9. 【代码审计】XYHCMS V3.5文件上传漏洞分析

      0x00 环境准备 XYHCMS官网:http://www.xyhcms.com/ 网站源码版本:XYHCMS V3.5(2017-12-04 更新) 程序源码下载:http://www.xyhc ...

随机推荐

  1. 获取dataset结果集的第一行第一列字段

    DataSet fileNameDs = DbHelper.excuteSqlResultDataSet(strSql); ) { DataTable fileNameDt = fileNameDs. ...

  2. JAVA常见算法题(三十)

    package com.forezp.util; import java.io.BufferedReader; import java.io.FileReader; import java.io.In ...

  3. 十二.spring-boot使用spring-boot-freemarker

    ①.在springMVC中:它代表着view层组件 ②.为什么使用freemarker:简单容易学.逻辑分明 ③.freemarker优点:它不依赖servlet.网络或者web环境 一.创建一个ma ...

  4. Navicat查看MySQL日志

    Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Style Definitions */ table.MsoNormalTable ...

  5. MR 数据过滤

    MR: package com.euphe.filter; import com.euphe.util.HUtils; import com.euphe.util.Utils; import com. ...

  6. minic 动作句型处理

    #include "lex_define.h" enum keywords_type//代表一些关键字 { loop_for=,//代表for关键字 loop_while,//代表 ...

  7. 浏览器开发调试工具的秘密 - Secrets of the Browser Developer Tools

    来源:GBin1.com 如果你是一个前端开发人员的话,正确的了解和使用浏览器开发工具是一个必须的技能. Secrets of the Browser Developer Tools是一个帮助大家了解 ...

  8. C#秘密武器之表达式树

    一.表达式树入门 Lambda表达式树很复杂,从概念上很难理解清楚,一句话,表达式树是一种数据结构!这里我们通过下面的这个例子来理解一下表达式树,你就能看个大概: lambda表达式树动态创建方法 s ...

  9. Python strings, 元组tuples, 和numbers是不可更改的对象,而list,dict等则是可以修改的

    在python中,strings, 元组tuples, 和numbers是不可更改的对象,而list,dict等则是可以修改的对象. a = 1 def fun(a):     a = 2 fun(a ...

  10. js 因加入form导致两个table之间出现空白问题

    在<FORM>中加CSS <table> ....... </table> <form style="padding:0; margin:0;&qu ...