<label for="file">
<img src="data:images/morende.jpg" alt="">
<span>点击更换头像</span>
</label>
<input type="file" name="file" id="file" accept="image/*" value="" hidden=""/>
$("input[type='file']").change( function(event) {//上传图片
  console.log(event)
var file = event.currentTarget.files[0]
var formFile = new FormData();
formFile.append("file", file); $.ajax({
url: ajaxURL+'/currency/istImage',
type: 'POST',
data: formFile,
async: true,
cache: false,
contentType: false,
processData: false,
dataType:'json',
success: function(res) {
console.log(res);
}
}) });

或者循环多个上传

<input type="file" onchange="upload(this)">
<script>
function upload(obj){
var files = obj.files ;
var formData = new FormData();
for(var i = 0;i<files.length;i++){
formData.append("upfile[]", files[i]); }
$.ajax({
url: "1.php",
type: "POST",
data:formData,
cache:false, //不设置缓存
processData: false, // 不处理数据
contentType: false // 不设置内容类型
});
}
</script>

input type=file实现图片上传的更多相关文章

  1. input type=file实现图片上传,预览以及图片删除

    背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...

  2. input type="file"多图片上传 原生html传递的数组集合

    单个的input type="file"表单也是可以实现多图片上传的 代码如下: <form action="manypic.php" method=&q ...

  3. input type="file"多图片上传

    单个的input type="file"表单也是可以实现多图片上传的 代码如下: <form action="manypic.php" method=&q ...

  4. jquery的input:type=file实现文件上传

    <!DOCTYPE html> <html> <head> <title>html5_2.html</title> <style> ...

  5. input type="file" accept="image/*"上传文件慢的问题解决办法

    相信大家都写过<input type="file" name="file" class="element" accept=" ...

  6. input type=file 选择图片并且实现预览效果的实例

    为大家带来一篇input type=file 选择图片并且实现预览效果的实例. 通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型, ...

  7. input type=file 选择图片并且实现预览效果

    通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型,如:只要传图片,且不限制图片格式,为image/*: multiple:规定是否 ...

  8. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  9. 简单的html5 File base64 图片上传

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. jmeter通过BeanShell,实现对接口参数HmacSHA256加密(转)

    jmeter通过BeanShell,实现对接口参数HmacSHA256加密2019-04-29 05:10 ps. 最近抓包网站的登陆请求,发现就2个参数,用户名和密码,通过工具去请求这个接口,一直返 ...

  2. Docker 制作定制asp.netcore 的容器

    上文Windows docker k8s asp.net core的k8swebap镜像只是一个asp.net core程序,在实际生产中我们希望容器中还有一些其他程序,比如ssh 和telegraf ...

  3. JDBC 复习

    概念 Java DataBase Connectivity java数据库连接 定义了操作所有关系型数据库的规则(接口),不同的数据库厂商编写类实现这些接口,这些类就叫数据库驱动,使得用户只需要使用统 ...

  4. 2019 翔通动漫java面试笔试题 (含面试题解析)

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.翔通动漫等公司offer,岗位是Java后端开发,因为发展原因最终选择去了翔通动漫,入职一年时间了,也成为了面 ...

  5. SpringBoot与SpringDateJPA和Mybatis的整合

    一.SpringBoot与SpringDateJPA的整合 1-1.需求 查询数据库---->得到数据------>展示到页面上 1-2.整合步骤 1-2-1.创建SpringBoot工程 ...

  6. springmvc处理json数据

    springMVC提供了处理JSON格式请求/响应的HttpMessageConverter MappingJckson2HttpMessageConverter利用Jackson开源类包处理JSON ...

  7. jQuery中的DOM操作【续】

    一.复制节点$(选择器字符串).clone(false)    [返回克隆的节点对象]参数:false,浅复制,复制元素但不复制元素中所绑定的事件[默认为false]true,深复制,复制元素且复制元 ...

  8. JavaScript 之 节点操作

    一.文档树结构 DOM 可以将任何 HTML 或 XML 描绘成一个由多层节点构成的结构. 节点分为不同的类型,每种类型分别表示文档中不同的信息.每个节点都拥有各自的特点.数据和方法,另外也与其他节点 ...

  9. Python实现的贪婪算法

    个州的听众都收听到.为此,你需要决定在哪些广播台播出.在每个广播台播出都需要支出费用,因此你力图在尽可能少的广播台播出 # 1.创建一个列表,其中包含要覆盖的州 states_needed = set ...

  10. Kafka消费者组静态成员(static consumer member)

    Kafka 2.3发布后官网的Consumer参数中增加了一个新的参数:group.instance.id.下面是这个参数的解释: A unique identifier of the consume ...