技术标签: ajax和h5文件上传
文件域
遇到的几个BUG 已经解决
1 多选文件域,如果没有上传成功或已上传成功,再次点击文件域名选择图片时,会累积上次的文件。
例如 第一次上传1.jpg 第二次点击上传 2.jpg 第二次的上传结果为1.jpg 2.jpg 上传了两张。
解决此问题思路:
1 在网上查了很多关于清除file文件域的办法,都不起作用/
2 最终用了删除直接的file文件域 重新创建一个file文件域 重新绑定事件,重复上传文件解决。
/**
* 初始化图片上传文件
*/
function init_list_imgs(){
if(!(window.FileReader && window.File && window.FileList && window.Blob)){
$.alert('您的浏览器不支持fileReader');
return false;
}
add_imgs();
}
/**
* 动态添加的图片上传
*/
function add_imgs(){
imgs_div_html = '\
\\
\
\
\
$('#wash_car_mem').after(imgs_div_html);
//点击 外观 事件
img_nav();
//绑定 事件
bind_event();
}
/**
* 首次
*/
function bind_event(){
var file_input = $('.li_imgs').children('.imgs').last().children().first();
file_input_change(file_input);
}
/**
* 区分 Ios android 绑定 文件上传事件
*/
function file_input_change(file_input){
file_input.next('span').on('click',function(){
$('#file_input_ss_'+file_input_id).click().trigger();
});
file_input.on('click',function(){
$(this).attr('disabled');
var u = navigator.userAgent;
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //安卓手机
// 调安卓接口,调拍照和相册的弹窗
window.androidJsInterface.obtainFile();
} else {
ios_bind_change(file_input);
}
});
}
/**
* IOS 文件上传事件绑定
*/
function ios_bind_change(file_input){
file_input.on('change',function(){
//单通道
if(_deny_request){
remove_file_input($(this))
return;
}
_deny_request = true;
//载入动画
$.showPreloader(_up_img_msg);
if(!this.files.length){
$('.li_imgs').children('.imgs').last().children().first().removeAttr('disabled');
$.hidePreloader();
_deny_request = false;
return;
}else if(this.files.length > 6){
$.hidePreloader();
$.alert('一次最多只能选择6张图片哦',function(){_deny_request = false;$('.li_imgs').children('.imgs').last().children().first().removeAttr('disabled');remove_file_input($(this));});
return;
}else{
var s = check_file(this.files);
remove_file_input($(this));
}
});
}
/**
* 删除文件上传域 解决部分机型重复上传问题
*/
function remove_file_input(file_input){
file_input.remove();
++file_input_id;
$('.li_imgs').children('.imgs').last().children('span').before('');
file_input_change($('#file_input_ss_'+file_input_id));
}
/**
* IOS 图片上传
*/
function check_file(files){
//校验收集表单数据
var formdata = new FormData();
var bad_files = 0;
for(var i=0; i
if(/image\/\w+/.test(files[i].type)){
formdata.append("imgFile"+i, files[i]);
}else{
bad_files++;
}
}
if(bad_files >= files.length){
$.hidePreloader();
$('.li_imgs').children('.imgs').last().children().first().removeAttr('disabled');
_deny_request = false;
return;
}
//提交
$.ajax({
type: "POST",
dataType: "json",
contentType: false,
cache : false,
processData : false,
async: true,
url: '?c=bzymgr/washcar&a=add_imgs&openid=<?php echo $this->openid;?>',
data:formdata,
success: function (res) {
if(res=='0'){
public_toast('照片上传失败,请稍后重试',1000);
return;
}
var html = '';
for(var i in res){
html += '
\
X\
//存储到localStorage
add_imgs_LocalStorage(res[i]);
}
//插入dom
$('.li_imgs').children('.imgs').last().before(html);
setTimeout(function(){
$.hidePreloader();
$('.li_imgs').children('.imgs').last().children().first().removeAttr('disabled');
_deny_request = false;
},1000);
return;
},
error:function(){
public_toast('服务器离家出走了,请稍后重试',2000);
return;
},
});
}
/**
* 删除 已上传图片
* 只删除本地 服务器不删除
*/
function remove_img(obj){
$.confirm('确认要删除这张图片吗?',function(){
pop_imgs_LocalStorage($(obj).prev('img').attr('src'));
$(obj).parent().remove();
return;
});
}
以上代码在IOS 9.3.1 中用 Input file 可以调用出 相册和相机
但是在IOS 8.4版本中,就直接访问相册了。 目前还没有好找到好的解决办法。
input file美化,文件上传
此文学习至:http://www.haorooms.com/post/input_file_leixing 然而只会用,不会做,UI泪茫茫 效果图: 原图: 美化后: 此主要用css美化表单,然后用J ...
vue项目内嵌入到app input type=file 坑(文件上传插件)
w问题描述: 我用vue-cli完成的一个移动端项目,内嵌到app当中,用原生的input type=file 来完成文件上传.在安卓下没有问题但是在苹果手机 上传第二次手机就会发生白屏 并无缘无故跳 ...
ajax提交表单、ajax实现文件上传
ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...
Ajax 与文件上传
一 Ajax篇 1 ajax简介(Asynchronous Javascript And XML) 异步,Js,XML,即使用Javascript语言与服务器进行异步交互,传输的数据为xml(可扩展标 ...
基于 Django的Ajax实现 文件上传
---------------------------------------------------------------遇到困难的时候,勇敢一点,找同学朋友帮忙,找导师求助. Ajax Ajax ...
ajax与文件上传
一.ajax ajax(Asynchronous JavaScript And XML):异步JavaScript和XML,即使用JavaScript语句与服务器进行异步交互,传输的数据为XML(也可 ...
python django + js 使用ajax进行文件上传并获取上传进度案例
文章浏览阅读1k次。数据库备份的方法第一种:使用mysqldump结合exec函数进行数据库备份操作。第二种:使用php+mysql+header函数进行数据库备份和下载操作。下面 java 实现数据库备份的方法就是第一种首先我们得知道一些mysqldump的数据库备份语句备份一个数据库格式:mysqldump -h主机名 -P端口 -u用户名 -p密码 --database 数据库名 ..._java数据备份
文章浏览阅读3.4k次,点赞2次,收藏14次。window10_ffmpeg调试环境搭建_win10如何使用mingw64编译ffmpeg
文章浏览阅读6.3k次,点赞9次,收藏14次。给大家推荐《考试脑科学》这本书。作者介绍:池谷裕二,日本东京大学药学系研究科教授,脑科学研究者。1970年生于日本静冈县,1998年取得日本东京大学药学博士学位,2002年起担任美国哥伦比亚大学客座研究员。专业为神经科学与药理学,研究领域为人脑海马体与大脑皮质层的可塑性。现为东京大学药学研究所教授,同时担任日本脑信息通信融合研究中心研究主任,日本药理学会学术评议员、ERATO人脑与AI融合项目负责人。2008年获得日本文部大臣表彰青年科学家奖,2013年获得日本学士院学术奖励奖。这本书作者用非常通俗易懂_考试脑科学pdf百度网盘下载
文章浏览阅读1.4k次。其中,成都鼎桥通信技术有限公司是一家专业从事移动通讯终端产品研发和生产的高科技企业,其发布的TD Tech M40也是华为智选手机系列中的重要代表之一。华为智选手机是由华为品牌方与其他公司合作推出的手机产品,虽然其机身上没有“华为”标识,但是其品质和技术水平都是由华为来保证的。总之,华为智选手机是由华为品牌方和其他公司合作推出的手机产品,虽然外观上没有“华为”标识,但其品质和技术水平都是由华为来保证的。华为智选手机采用了多种处理器品牌,以满足不同用户的需求,同时也可以享受到华为全国联保的服务。_华为智选手机和华为手机的区别
文章浏览阅读7.6k次,点赞6次,收藏17次。目录题目描述输入输出代码打擂法数组排序任意输入n个整数,把它们的最大值求出来.输入只有一行,包括一个整数n(1_n个数中最大的那个数在哪里?输出其位置,若有多个最大数则都要输出。
文章浏览阅读520次。Python 2.7.2 (v2.7.2:8527427914a2, Jun 11 2011, 15:22:34)[GCC 4.2.1 (Apple Inc. build 5666) (dot 3)] on darwinType "help", "copyright", "credits" or "license" for more information.>>> float(1...
文章浏览阅读4.1k次。1.登录MYSQL系统命令打开DOS命令框shengfen,以管理员的身份运行命令1:mysql -u usernae -p password命令2:mysql -u username -p password -h 需要连接的mysql主机名(localhost本地主机名)或是mysql的ip地址(默认为:127.0.0.1)-P 端口号(默认:3306端口)使用其中任意一个就OK,输入命令后DOS命令框得到mysql>就说明已经进入了mysql系统2. 查看mysql当中的._mysql -u user
文章浏览阅读484次。一、lvs简介和推荐阅读的资料二、lvs和keepalived的安装三、LVS VS/DR模式搭建四、LVS VS/TUN模式搭建五、LVS VS/NAT模式搭建六、keepalived多种real server健康检测实例七、lvs持久性工作原理和配置八、lvs数据监控九、lvs+keepalived故障排除一、LVS简介和推荐阅读的资料 学习LVS+Keepalived必须阅读的三个文档。1、 《Keepalived权威指南》下载见http://..._this is the redundant configuration for lvs + keepalived server itself
文章浏览阅读795次,点赞20次,收藏15次。AIDL是使用bind机制来工作。java原生参数Stringparcelablelist & map 元素 需要支持AIDL其实Android开发的知识点就那么多,面试问来问去还是那么点东西。所以面试没有其他的诀窍,只看你对这些知识点准备的充分程度。so,出去面试时先看看自己复习到了哪个阶段就好。下图是我进阶学习所积累的历年腾讯、头条、阿里、美团、字节跳动等公司2019-2021年的高频面试题,博主还把这些技术点整理成了视频和PDF(实际上比预期多花了不少精力),包含知识脉络 + 诸多细节。
文章浏览阅读248次。承接:数据基础02
文章浏览阅读2.8w次,点赞14次,收藏88次。文章目录1. 概念:Narrow Width Effect: 窄宽度效应Short Channel effects:短沟道效应阈值电压 (Threshold voltage)2. 阈值电压与沟道长和沟道宽的关系:Narrow channel 窄沟的分析Short channel 短沟的分析1. 概念:Narrow Width Effect: 窄宽度效应在CMOS器件工艺中,器件的阈值电压Vth 随着沟道宽度的变窄而增大,即窄宽度效应;目前,由于浅沟道隔离工艺的应用,器件的阈值电压 Vth 随着沟道宽度_短沟道效应
文章浏览阅读335次。5月17日,小米集团再发组织架构调整及任命通知。新通知主要内容为前小米中国区负责人王川调职,雷军自任中国区总裁。小米频繁调整背后,雷军有些着急了中国区手机业务持续下滑。根据IDC最近公布的数据,小米一季度全球出货量为2750万台,相比去年同期的2780万台,小幅下降。参考Canalys、Counterpoint的统计,小米一季度出货量也都录得1%的同比下滑。作为对比,IDC数据显示,华为同期出..._小米更换硬件负责人