怎么通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端?
今天在论坛上看到这样一个问题,有必要编辑搜集下。
问题描述:怎么通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端
题主用jquery接收
<input name="c_pic" id="c_pic" type="file" class="file">
用的方法是:
var input = document.getElementById("c_pic");
input.addEventListener('change',readFile,false);
function readFile(){
var file = this.files[0];
}
题主想用ajax 的post方法把上传图片的相关信息传给后端,
接收到的file是个object file,
请问怎么转换成能够用post传递的数据格式?
当时我看到这个题目就想这还不简单,直接把file通过JSON.stringify(file)(注:stringify()用于从一个对象解析出字符串),代码如下:
var input = document.getElementById("c_pic");
input.addEventListener('change',readFile,false);
function readFile(){
var file = this.files[0];
var file_json = JSON.stringify(file);
console.log(file_json); //打印出来是: {}
$.post('',file_json);
}
发现打印出来的是一个空的对象:{};有知道的麻烦告知,感激不尽!
于是换了一种思路用uploadfile插件或百度的webuploader,其中jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端。
如果支持html5,可以使用FormData Ajax上传也能实现的。
怎么通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端?的更多相关文章
- js 获取上传视频的时长、大小、后缀名
参考资料:获取时长 var fileName = $("#sectionfileUpload").val(); //C:\fakepath\3.jpeg var exts = fi ...
- js获取上传文件内容(未完待续)
js 获取上传文件的字节数及内容 <div> 上传文件 : <input type="file" name = "file" id = &qu ...
- Atitit.js获取上传文件全路径
Atitit.js获取上传文件全路径 1. 默认的value只能获取文件名..安全原因.. 1 2. Firefox浏览器的读取 1 3. Html5 的file api 2 4. 解决方法::使用a ...
- js获取上传文件内容
js 获取上传文件的字节数及内容 <div> 上传文件 : <input type="file" name = "file" id = &qu ...
- JS获取上传文件的绝对路径,兼容IE和FF
<input type="file" id="fileBrowser" name="fileBrowser" size="5 ...
- js获取上传文件的绝对路径
在html中 <input type="file" id="importFile" /> <input type="bu ...
- js 获取上传文件的字节数及内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js获取上传的文件并用ajax提交
<form id="form1" name="form1" encType="multipart/form-data" method= ...
- JS获取上传文件的名称、格式、大小
<input id="File1" type="file" onchange="checkFile(this)" /> 方式一) ...
随机推荐
- SSM框架整合总结
关于ssm整合的相关总结: 1.持久层--->mybatis:通过Spring 来管理持久层的 Mapper (相当于 dao 接口),来完成对数据库的操作. 首先我们回顾一下,在单独使用myb ...
- Glide
1.简介 在泰国举行的谷歌开发者论坛上,谷歌为我们介绍了一个名叫 Glide 的图片加载库,作者是bumptech.这个库被广泛的运用在google的开源项目中,包括2014年google I/O大会 ...
- 「C语言」int main还是void main?
从大一入学刚接触C到现在已满7个月了,虽然刚开始就知道```int main```才是标准的写法,但一直没有深刻理解为什么不能用```void main```而必须使用```int main```. ...
- RHEL7文件权限
本文介绍Linux下的文件权限 操作系统为RHEL7.2_X86_64 可以从以下三种访问方式限制访问权限: 1 只允许用户自己访问 2 允许一个预先指定的用户组中的用户访问 3 允许系统中的任何用户 ...
- Spring(七)持久层
一.Spring对DAO的支持 DAO:Data Access Object Spring提供了DAO框架,让开发人员无须耦合特定的数据库技术,就能进行应用程序的开发. Spring封闭了操作Orac ...
- spring aop 拦截业务方法,实现权限控制
难点:aop类是普通的java类,session是无法注入的,那么在有状态的系统中如何获取用户相关信息呢,session是必经之路啊,获取session就变的很重要.思索很久没有办法,后来在网上看到了 ...
- Atitit。 《吠陀》 《梨俱吠陀》overview 经读后感 是印度上古时期一些文献的总称
Atitit. <吠陀> <梨俱吠陀>overview 经读后感 是印度上古时期一些文献的总称 1. 印度古<吠陀>经,是印度上古时期一些文献的总称, 1 1.1 ...
- Visual Studio发布Web项目报错:Unable to add 'xxx' to the Web site. Unable to add file 'xxx'. The specified file could not be encrypted.
背景 Visual Studio下的Web项目 现象 发布时遇到Unable to add 'xxx' to the Web site. Unable to add file 'xxx'. The ...
- python 连接 db2
export IBM_DB_DIR=/home/db2inst1/sqllib export IBM_DB_LIB=/home/db2inst1/sqllib/lib http://programmi ...
- Effetive Java 22 Favor static member classes over nonstatic
Nested class types Usage and remark Advantage Disadvantage static member classes Use for public help ...