input type=file实现图片上传

时间:2022-09-26 07:51:24
<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&equals;file实现图片上传,预览以及图片删除

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

  2. input type&equals;&quot&semi;file&quot&semi;多图片上传 原生html传递的数组集合

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

  3. input type&equals;&quot&semi;file&quot&semi;多图片上传

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

  4. jquery的input&colon;type&equals;file实现文件上传

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

  5. input type&equals;&quot&semi;file&quot&semi; accept&equals;&quot&semi;image&sol;&ast;&quot&semi;上传文件慢的问题解决办法

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

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

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

  7. input type&equals;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. String类字符串截取示范

    package it.com; // 要求:對字符串“jflksjdfnbalkdfjnbaddddnbahhuhnbauuuuahnbahdfunbadhfudf”进行检索:判断有多少个nba; / ...

  2. HTML5实战1

    第一章 1.搭建环境,wamp 2.检查浏览器是否支持html5 ,是否支持新标签<canvas></canvas> 3.简单高效,少用id,多用标签. 4.使用css3美化样 ...

  3. POJ 1840 Eqs

    Eqs Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 15010   Accepted: 7366 Description ...

  4. ex26 纠正练习

    题目中给出的代码如下: def break_words(stuff): """This function will break up words for us.&quot ...

  5. UIScrollView的相关属性说明

    _scrollView = [[UIScrollView alloc] init]; //height = 0:禁止垂直方向滚动 _scrollView.contentSize = CGSizeMak ...

  6. 96&period; Unique Binary Search Trees

    题目: Given n, how many structurally unique BST's (binary search trees) that store values 1...n? For e ...

  7. &lt&semi;s&colon;iterator&gt&semi; 序号

    <s:iterator />的序号,解决这个问题有两种办法. 方法一:通过set标签实现: <s:set name="a" value=1/> <s: ...

  8. mapreduce框架详解

    hadoop 学习笔记:mapreduce框架详解 开始聊mapreduce,mapreduce是hadoop的计算框架,我学hadoop是从hive开始入手,再到hdfs,当我学习hdfs时候,就感 ...

  9. HttpHandler 实现文件下载

    一个浏览者发出的请求都是由实现了IHttpHandler接口的对象进行响应,由于下次访问不一定还是上次那个对象进行响应,上次响应完毕对象可能已经被销毁了,写的类变量值早就不存在了,因此不将状态信息保存 ...

  10. SpringMVC提交数据遭遇基础类型和日期类型报400错误解决方法

    使用SpringMVC开发的时候,页面如果有日期格式的数据,后台接受也是java.util.Date,则报告400错误 .下面是解决方案的演示示例: 这个是实体类,里面createDate就是java ...