通过ajax单独上传图片

解决问题：如何用ajax上传图片文件

1：先说我们平时接触到的接口都是后台需要你给他传递几个参数，你就把参数对应的值给他们就行了

上面的这个截图就是我们最常用的接口形式；

2.当你给后台传图片时，你传的是一个文件而不再是普通的string类型的值。而是file类型也就是文件类型

我这里说的是用ajax实现的图片上传

1.在ajax中加上processData : false,
2.在ajax中加上contentType : false,
3.在ajax中加上async:false,

4.主要是改变ajax中的data这个属性：看代码

//js代码<script type="text/javascript">function upload1() {$('#thumb').click();// $("#thumb").unbind().change() 防止change事件多次调用接口$("#thumb").unbind().change( function() {console.log( $("#thumb").val())   //虚拟路径C:\fakepath\upload.png//console.log( $("#thumb").files[0])var formData =new FormData();   //新建表单元素formData.append('file',$('#thumb')[0].files[0]);   //添加上传文件变量，获得文件真实信息，解决虚拟路径console.log( document.getElementById("thumb").files[0])$.ajax({type:'POST',url:'{:url("Upload/Upload12")}',data:formData,processData: false, // 告诉jQuery不要去处理发送的数据contentType: false, // 告诉jQuery不要去设置Content-Type请求头async:false,success:function(res){if(res.code == 2) {$('#img1').attr('src',res.src)$('#imgbox1').css('display','inline-block');$('#add1').css('display','none');$('#imgbox1').append('<input type="hidden" name="thumb" value="'+ res.id +'">');alert("上传成功！");$("#thumb").val(''); //清空文件输入框里的数据，解决选择相同文件名文件change不起作用} else {alert("上传失败！");}}})//return false});}

针对于change事件上传文件调用多次接口问题
在每次调用change事件之前先解绑在加事件即可

unbind() 解绑

$(that).children('input').unbind().change(function () {})

解决选择相同文件名文件change不起作用

在change事件中的最后将本次的value置空。

  uploadChange() {let files = this.$refs["upload"].files[0];this.flieData = files...if (!validImage(files, 2)) {// 防止第二次传同图片，不触发uploadChange,将上传文件里的值清空this.$refs["upload"].value = ''return}}

通过ajax单独上传图片相关推荐

ajax 批量上传图片插件,jQuery多文件上传插件jquery.imageuploader.js
插件描述:jQuery多文件上传插件jquery.imageuploader.js,可以同时上传多个文件并支持拖拽上传 jquery.imageuploader.js 一款jquery多文件上传插件. ...
ajax异步上传图片文件并将其转换为base64格式
ajax异步上传图片文件并将其转换为base64格式高级浏览器上面,可以直接使用html5的FileReader,实现获取上传文件的base64格式,并以字符串形式提交.对于IE9以下的浏览器,就得 ...
OCR文字识别，基于腾讯云的demo，Ajax+Struts2上传图片进行文字识别
服务简介通用 OCR 技术提供图片整体文字的检测和识别服务,返回文字框位置与文字内容.支持多场景.任意版面下整图文字的识别,以及中英文.字母.数字的识别. 应用场景:印刷文档识别.广告图文字识别.街 ...
thinkPHP利用ajax异步上传图片并显示、删除
近来学习tp5的过程中,项目中有个发帖功能,选择主题图片.如下: 利用原始的文件上传处理,虽然通过原始js语句能实时显示上传图片,但是这样的话会涉及很多兼容问题.使用ajax技术,实现选择性删除所选图 ...
ajax 批量上传图片插件,TinyMCE多图片批量上传（Ajax）教程
需要用上插件:axupimgs 插件作者:莫若卿支持版本:5.0.4+ 支持语言:仅中文插件版本:1.6 一.axupimgs 插件作用: 这是一个tinymce多图片批量上传插件,支持拖拽文件添 ...
Ajax Upload上传图片失败的解决方法：
最近用Ajax Upload实现无刷新上传图片,部署到本机IIS是可以正常上传的,部署到云服务器后, 就总是报这个错误:服务器没有返回数据,可能服务器忙,请稍候再试!这个问题困扰了我四五天! 方法1: ...
Ajax+php上传图片
要使用手机上传图片,多次上传表单不成功,图片没有传过去,上网上找了很多ajax上传的例子,自己做了个demo. demo下载地址 PS:在php环境下运行.
ajax 不能上传图片,自己动手打造ajax图片上传(网上没有的)
今天笔者需要一款图片上传插件,但是网上没有提供一款符合自己需求且好用的.于是就自己动手写了一个. 方法1,仅使用jquery代码,不用第三方插件.代码如下上传图片 $(function() { $( ...
原生ajax+php上传图片的简单实现
前端 <input type="file" onclick="updown" accept="image/png,image/gif" ...
jq ajax异步上传图片插件,jQuery异步上传文件插件ajaxFileUpload详细介绍
一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数 ...

通过ajax单独上传图片

通过ajax单独上传图片相关推荐

最新文章

热门文章