通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法


Posted in Javascript onOctober 01, 2015

项目需求:如何通过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传递给后端的方法,希望对大家有所帮助。

Javascript 相关文章推荐
IE8 原生JSON支持
Apr 13 Javascript
javascript 得到文件后缀名的思路及实现
May 09 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 Javascript
js编写简单的计时器功能
Jul 15 Javascript
详解RequireJs官方使用教程
Oct 31 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
微信小程序实现选项卡滑动切换
Oct 22 Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 #Javascript
JS处理json日期格式化问题
Oct 01 #Javascript
JS日期格式化之javascript Date format
Oct 01 #Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
Oct 01 #Javascript
RequireJS入门一之实现第一个例子
Sep 30 #Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 #Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 #Javascript
You might like
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
php单链表实现代码分享
2016/07/04 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
JavaScript中Date.toSource()方法的使用教程
2015/06/12 Javascript
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
jQuery实现查看图片功能
2020/12/01 jQuery
Python中的类与对象之描述符详解
2015/03/27 Python
深入理解Python对Json的解析
2017/02/14 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
django自带调试服务器的使用详解
2019/08/29 Python
python中@property和property函数常见使用方法示例
2019/10/21 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
adidas美国官网:adidas US
2016/09/21 全球购物
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
公司财务工作总结的自我评价
2013/11/23 职场文书
后勤部长岗位职责
2013/12/14 职场文书
火车的故事教学反思
2014/02/11 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
法人代表授权委托书范文
2014/09/10 职场文书
校园运动会广播稿
2015/08/19 职场文书
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
关于python爬虫应用urllib库作用分析
2021/09/04 Python