技术标签: 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进行文件上传并获取上传进度案例
文章浏览阅读5.1k次。strftimestrftime是C语言标准库中用来格式化输出时间的的函数。下面是strftime的用法各参数意义代码使用示例#include<stdio.h>#include<time.h>#define print(s1, s2,s3) \ printf("%-20s%-30s%s\n",s1, s2,s3);int main(){ time_t rawtime; struct tm* timeinfo; char timE[80]; /
文章浏览阅读147次。传送门 01分数规划板题啊。 发现就是一个最优比率环。 这个直接二分+spfa判负环就行了。 代码:#include<iostream>#include<cstdio>#include<cstring>#include<algorithm>#include<cmath>#define N 1005#define...
文章浏览阅读3.1k次,点赞2次,收藏14次。1)date_format函数(根据格式整理日期) 作用:把一个字符串日期格式化为指定的格式。select date_format('2017-01-01','yyyy-MM-dd HH:mm:ss'); --日期字符串必须满足yyyy-MM-dd格式 结果:2017-01-01 00:00:002)date_add、date_sub函数(加减日期) 作用:把一个字符串日期格式加一天、减一天。select date_add('2019-01-01',1); ..._hive sql 日期函数
文章浏览阅读2.1k次。使用百度语音合成过程时,一直error : notfint libgnustl_shared.so在项目工程gradle文件中添加如下代码段:sourceSets { main { jniLibs.srcDirs = ['libs'] } }..._旧版的百度语言合成报错
文章浏览阅读425次。Description 刁姹接到一个任务,为税务部门调查一位商人的账本,看看账本是不是伪造的。账本上记录了n个月以来的收入情况,其中第i个月的收入额为Ai(i=1,2,3…n-1,n), 。当 Ai大于0时表示这个月盈利Ai 元,当 Ai小于0时表示这个月亏损Ai元。所谓一段时间内的总收入,就是这段时间内每个月的收入额的总和。 刁姹的任务是秘密进行的,为了调查商人的账本,她只好跑到商人那_狡猾的商人[hnoi2005]
文章浏览阅读1k次。1、HTML5 Web SQL 数据库 Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs。如果你是一个 Web 后端程序员,应该很容易理解 SQL 的操作。Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。2、核心方法 以下是规范中定义的三个_方式准则的定义
文章浏览阅读1.3k次。限制用户登录后访问硬盘分区。我们的部门有一台公用计算机,该计算机由我维护。其他同事也可以偶尔使用它。我在操作系统中为自己创建了一个超级管理员用户,还创建了一个受限用户。登录到计算机后,如何允许受限用户查看但不能访问用于存储重要文件的D分区?您可以通过以下操作实现该目标:在系统桌面上使用鼠标依次选择“开始”。在弹出窗口的“打开”(Open)字段中键入gpedit.msc,然后单击“确定”(OK)按钮..._win7 分区只能某个用户打开
文章浏览阅读6.7k次,点赞17次,收藏21次。1.在vscode里面按下快捷键ctrl+shift+p2.输入Classpath3.点击Output下的Browse选择.class文件的输出路径4.如图,选择完以后,.class文件的输出层级目录会自动建立_vscode怎么class文件
文章浏览阅读1.2w次,点赞4次,收藏24次。python的缩进规则:对于类定义、函数定义、流程控制语句、异常处理语句等,行尾的冒号和下一行的缩进,表示下一个代码块的开始,而缩进的结束则表示此代码块的结束。通常情况下都是采用4个空格长度作为一个缩进量(一个Tab键就表示4个空格)。一,Python缩进长度及缩进字符。 看到网上一些Python缩进的错误示范,“tab符和空格不能混用”,“缩进一定是4个空格”下列演示。def change(a): print(id(a)) # 指向的是同一个对象(tab缩进) a=10_python缩进规则
文章浏览阅读1.1k次。JS代码 /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { setTimeout( function(){ wx.showToast({ title: '黄菊华老师', }) },2000 ) },说明该代码只执行一次..._微信小程序 settimeout 向上层传值
文章浏览阅读48次。uploadify2.1.4如何能使按钮显示中文博客分类:uploadify网上关于这段话的搜索恐怕是太多了。方法多也试过了不知怎么,反正不行。最终自己想办法给解决了。当然首先还是要有fla源码。直接去管网就可以下载。[url]http://www.uploadify.com/wp-content/uploads/uploadify-v2.1.4...
文章浏览阅读9.6k次,点赞5次,收藏36次。戴尔服务器安装VMware ESXI6.7.0教程(U盘安装)一、前期准备1、下载镜像下载esxi6.7镜像:VMware-VMvisor-Installer-6.7.0-8169922.x86_64.iso这里推荐到戴尔官网下载,Baidu搜索“戴尔驱动下载”,选择进入官网,根据提示输入服务器型号搜索适用于该型号服务器的所有驱动下一步选择具体类型的驱动选择一项下载即可待下载完成后打开软碟通(UItraISO),在“文件”选项中打开刚才下载好的镜像文件然后选择启动_vmware-vcsa-all-6.7.0-8169922.iso