ajax和h5文件上传,h5 input file ajax实现文件上传

 文件域

遇到的几个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&equals;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 &plus; js 使用ajax进行文件上传并获取上传进度案例