1.移动端直接用的input的file上传图片(name=“file”必填)

<input type="file"  id="exampleInputFile1"  accept="image/*" class="col-xs-3" name="file" >
<label for="exampleInputFile1" class="col-xs-3 InputFile">
<img src="img/signup/add.png" alt="" class=" add1"/>
</label>
 <div class="box1">
<label for="exampleInputFile1" class="col-xs-3">封面美照*</label>
<span class="help-block col-xs-9">(仅可以上传1张png/jpg格式的图片)</span>
<div class="col-xs-12">
<input type="file" id="exampleInputFile1" accept="image/*" class="col-xs-3" name="file" >
<div class="action1 col-xs-9"><!--展示图片页面-->
<label for="exampleInputFile1" class="col-xs-3 InputFile">
<img src="img/signup/add.png" alt="" class=" add1"/>
</label>
</div>
</div> </div>

2.js部分。因为input中的file值需要清空,FormData的值也需要清空。但是ios不支持清空,所以重置下FormData,每次成功之后新建这个对象,这样ios和android都支持了~

 $('#exampleInputFile1').on("change",function() {
var index;
index=layer.open({
type: 2
,content: '上传中'
});
// 创建
var form_data = new FormData();
// 获取文件
var file_data = $("#exampleInputFile1").prop("files")[0];//封面
form_data.append("file", file_data );
console.log(file_data );
if( file_data!=""){
$.ajax({
type: "POST",
url:config.api+"/public/upload",
enctype : "multipart/form-data",
dataType : "json",
processData: false, // 注意:让jQuery不要处理数据
contentType: false, // 注意:让jQuery不要设置contentType
data: form_data,
}).success(function(msg) {
form_data=new FormData ();//新建formdata!!!
/*form_data.delete("file");*/
$("#exampleInputFile1").val('');//清空input中的file值
layer.close(index);
$('.InputFile img').show();
if($('.img1').attr('src')==""){ } else{
$('.action1').append('<div class="cropped">' +
'<div class="image1 col-xs-3">'+
'<img src="'+msg.data+'" class="img1" id="show"/>'+
'<div class="delete1">'+"X"+'</div>'+
'</div>'+
'</div>');
$('.add1').remove();
$('.InputFile img').hide();
$('.InputFile').remove();
/* $('#exampleInputFile1').setAttribute('type','text');*/
/* $('.action1').append( '<div class="delete1">'+"X"+'</div>');*/
}
/*图片删除*/
$('.delete1').click(function () {
$("#exampleInputFile1").val('');
/*$(this).siblings().find('.cropped').remove();*/
$(this).parent().remove();
$(this).parent().parent().remove();
$(this).siblings().find('.delete1').remove();
$(this).remove();
$('.action1').append('<label for="exampleInputFile1" class="col-xs-3 InputFile">' +
'<img src="img/signup/add.png" alt="" class=" add1"/>' +
'</label>');
/*$('#exampleInputFile1').setAttribute('type','file');*/
});
console.log(msg);
}).fail(function(msg) {
console.log(msg);
});
} });

使用的layer移动版,引入layer.js和layer.css即可~

FormData中delete方法在ios不兼容的更多相关文章

  1. Hibernate&nbsp;Session的delete()方法

    本文介绍Hibernate Session的delete()方法.delete()方法用于从数据库中删除与Java对象对应的记录.对应游离对象和持久化对象,delete语句会做出不同的反应. AD:  ...

  2. ASP.NET Core 中文文档 第二章 指南(4.10)检查自动生成的Detail方法和Delete方法

    原文 Examining the Details and Delete methods 作者 Rick Anderson 翻译 谢炀(Kiler) 校对 许登洋(Seay).姚阿勇(Mr.Yao) 打 ...

  3. ASP.NET MVC 学习8、Controller中的Detail和Delete方法

    参考:http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/examining-the-details-and ...

  4. 【mybatis】service层中一个方法中使用mybatis进行数据库的 多个修改操作,可能是update也可能是delete操作,但是sql语句命名执行并且在控制台打印出来了,但是数据库中未更新到数据【事务的问题】

    问题描述: service层中一个方法中使用mybatis进行数据库的 多个修改操作,可能是update也可能是delete操作,但是sql语句命名执行并且在控制台打印出来了,但是数据库中未更新到数据 ...

  5. java中File的delete()方法删除文件失败的原因

    java中File的delete()方法删除文件失败的原因 学习了:http://hujinfan.iteye.com/blog/1266387 的确是忘记关闭了: 引用原文膜拜一下: 一般来说 ja ...

  6. 【Airtest】Airtest中swipe方法兼容不同分辨率的解决方法

    使用Airtest中swipe方法由于不同分辨率的手机上滑动的坐标位置不同,所以想要兼容所有的手机,仅仅靠固定坐标就会出现问题 想要兼容所有的手机,可以按照如下思路进行 1.首先获取手机的分辨率,可以 ...

  7. laravel中delete()方法和destroy()方法的区别

    delete()方法是实例方法,需要查询到相应的数据并通过模型实例调用 destroy()方法可以直接调用,通过索引删除记录 举个栗子: /*delete()方法删除*/ //先查找记录 $blog ...

  8. ASP.NET MVC 5 - 查询Details和Delete方法

    在这部分教程中,接下来我们将讨论自动生成的Details和Delete方法. 查询Details和Delete方法 打开Movie控制器并查看Details方法. public ActionResul ...

  9. iOS开发 - 兼容iOS 10

    1.Notification(通知) 自从Notification被引入之后,苹果就不断的更新优化,但这些更新优化只是小打小闹,直至现在iOS 10开始真正的进行大改重构,这让开发者也体会到UserN ...

随机推荐

  1. 【全文转载】Precision Helper:最佳免费 CHM 制作软件

    跳至内容 善用佳软 IT义工的个人博客: 善用佳软= (善意+善于)应用优秀软件 xbeta= x(未知数)+β(改进测试版) Precision Helper:最佳免费 CHM 制作软件 许多用户都 ...

  2. Docker build Dockerfile 构建镜像 - 二

    Dockerfile 制作镜像 https://hub.docker.com/ 搜索需要镜像: https://hub.docker.com/_/centos/ 官方示例: centos:6 1.这里 ...

  3. [C++]环状序列(CircularSequence,ACM/ICPC Seoul 2004,UVa1584)

    Question 例题3-5 环状序列(CircularSequence,ACM/ICPC Seoul 2004,UVa1584) 长度为n的环状串有n种表示方法,分别为从某个位置开始顺时针得到,在这 ...

  4. ARM核心板_迅为4418核心板_高稳定超轻薄_研发超灵感

    ARM核心板_迅为4418核心板_三星四核S5P4418处理器 4418核心板正面: 4418核心板反面:4418核心板尺寸图:详情了解:https://item.taobao.com/item.ht ...

  5. 嵌入式4412开发板学习知识-Linux系统基础知识

    1. 什么是Linux系统编程 Linux系统编程分为三个部分:系统调用.C库和C编译器. 系统调用系统编程的基础是系统调用,也结束于系统调用.在带有操作系统的嵌入式开发中,需要从操作系统申请一些服务 ...

  6. centos 6.8下载地址

    centos6.8校验码查询网站:https://wiki.centos.org/zh-tw/Manuals/ReleaseNotes/CentOS6.8 CentOS 6.8 64位DVD 种子下载 ...

  7. Nginx系列1:ubuntu16.04编译出适合自己的nginx服务器

    1.下载nginx nginx官网:nginx.org tar.gz文件 解压缩命令: wget https://nginx.org/download/nginx-1.14.2.tar.gz #下载n ...

  8. openstack Q版部署-----Cinder云存储服务(10)

    一.cinder介绍 一般 cinder-api 和 cinder-scheduler 安装在控制节点上, cinder-volume 安装在存储节点上. 二.数据库配置 # 在任意控制节点创建数据库 ...

  9. pytorch1.0 用torch script导出模型

    python的易上手和pytorch的动态图特性,使得pytorch在学术研究中越来越受欢迎,但在生产环境,碍于python的GIL等特性,可能达不到高并发.低延迟的要求,存在需要用c++接口的情况. ...

  10. python使用PDB进行调试

    参考链接:https://www.cnblogs.com/xiaohai2003ly/p/8529472.html 调入包:import pdb 调试时的一些命令: (1)p  变量名:查看变量:(p ...