<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. 小知识点 之 JVM -XX:SurvivorRatio

    JVM参数之-XX:SurvivorRatio 最近面试过程中遇到一些问JVM参数的,本着没用过去学习的办法看了些博客写得不准确,参考oracle的文档记录一下,争取每天记录一点知识点 -XX:Sur ...

  2. 【已解決】谷歌浏览器如何清理缓存(cookie)

    清除缓存快捷键 Ctrl+Shift+Delete

  3. .NET中的异步编程——动机和单元测试

    背景 自.NET 4.5发布以来已经有很长一段时间了.留在了我们的记忆里,其发布在2012年8月15日.是的,六年前.感觉老了吗?好吧,我不打算让你做出改变,而是提醒你一些.NET发布的亮点.此版本带 ...

  4. only size-1 arrays can be converted to Python scalars

    python版本:3.6.5 opencv版本:3.2.0 使用的jupyter notebook 源码如下: import cv2 import numpy as np import matplot ...

  5. box-shadow 模糊半径与扩展半径

    关于box-shadow的基本用法参阅CSS3 box-shadow一章节. 此属性用来设置元素的阴影效果,语法结构如下: box-shadow:h-shadow v-shadow blur spre ...

  6. mui之href页面跳转

    <a class="mui-control-item" href="" onclick="window.location.href = 'dai ...

  7. psexec与wmi在内网渗透的使用

    psexec是一个很好的管理工具,在内网渗透中也被广泛使用. 但太“出名”也往往会遭来各种麻烦. 在有安全监听.防护的内网中使用psexec会容易触发告警. 1.psexec用法(前提:对方要开启ad ...

  8. Java深入学习(4):Future模式

    Future模式: 其实相当于是前端的Ajax 比如我们使用多线程下载文件时候,每一个线程都会发送HTTP请求资源.而我如何知道,文件下载完毕呢? 也就是说,主线程如何获得子线程的执行结果呢? 创建多 ...

  9. Node初识

    初识Nodejs Node.js的诞生 作者Ryan Dahl 瑞恩·达尔 2004 纽约 读数学博士 2006 退学到智利 转向开发 2009.5对外宣布node项目,年底js大会发表演讲 2010 ...

  10. .Net core 使用swagger进行Api管理

    上次我们讲过如何在swagger上隐藏接口,众所周知,swagger是一个强大的api文档工具,可以帮助我们记录文档并且测试接口,也是一个可视化操作接口的工具. 那么如果我们写的接口非常多的时候怎么办 ...