<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. windows 安装 scrapy (python3.7)

    今天想要用scrapy爬取数据,想到原来刷过机没有这个库了就重新安装了一遍 安装scrapy 需要的东西   https://pan.baidu.com/s/1kuLvGQBG8tMTCY3WDLuU ...

  2. Flutter 宽高比(比率)控件 AspectRatio

    const AspectRatio({ Key key, @required this.aspectRatio, Widget child,}) void main() {  runApp(    n ...

  3. BZOJ1040: [ZJOI2008]骑士(奇环树,DP)

    题目: 1040: [ZJOI2008]骑士 解析: 假设骑士\(u\)讨厌骑士\(v\),我们在\(u\),\(v\)之间连一条边,这样我们就得到了一个奇环树(奇环森林),既然是一颗奇环树,我们就先 ...

  4. DataPipeline丨构建实时数据集成平台时,在技术选型上的考量点

    文 | 陈肃 DataPipeline  CTO 随着企业应用复杂性的上升和微服务架构的流行,数据正变得越来越以应用为中心. 服务之间仅在必要时以接口或者消息队列方式进行数据交互,从而避免了构建单一数 ...

  5. Jmeter CSV参数带汉字处理

    问题1:请求参数中有汉字,在windows上调测压测没有问题,直接把参数文件上传到linux 服务器上进行分布式压测时发现参数取出后为乱码,linux上后台查看文件也是乱码 处理方法: 初步想到是因为 ...

  6. Linux 系统管理 : last 命令详解

    原文 last命令用于显示用户最近登录信息.单独执行last命令,它会读取/var/log/wtmp的文件,并把该给文件的内容记录的登入系统的用户名单全部显示出来 语法 last(选项)(参数) 选项 ...

  7. 【爬虫】随机获取UA

    使用模块  fake-useragent https://github.com/hellysmile/fake-useragent 1.安装模块 2.配置 # settings.py '''下载器中间 ...

  8. Dockerfile(从无到有创建镜像)

    本文原始地址:https://sitoi.cn/posts/43818.html 结构 DockerFile分为四部分组成: 基础镜像信息 维护者信息 镜像操作指令 容器启动时执行指令 基础镜像信息 ...

  9. HTML那些标签已废弃,被代替

    表单:cellpadding,cellspacing属性:已废弃, 替代者: table { border-collapse:collapse; } table, td, th { border:1p ...

  10. Netbackup常用命令--bprestore

    bprestore bprestore – 从 NetBackup 服务器还原文件 大纲 bprestore [-A | -B | -rb] [-K] [-l | -H | -y] [-r] [-T] ...