通过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 相关文章推荐
jQuery 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
基于vue2.0实现简单轮播图
Nov 27 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 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将字符分解为多个字符串的方法
2014/11/22 PHP
详解PHP中的PDO类
2015/07/06 PHP
PHP7多线程搭建教程
2017/04/21 PHP
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
js 内存释放问题
2010/04/25 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
vue实现购物车的监听
2020/04/20 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
python中stdout输出不缓存的设置方法
2014/05/29 Python
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
Python脚本实现12306火车票查询系统
2016/09/30 Python
Python实现选择排序
2017/06/04 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
对Python实现累加函数的方法详解
2019/01/23 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
深入学习python多线程与GIL
2019/08/26 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
详解HTML5中的标签
2015/06/19 HTML / CSS
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
家长对孩子评语
2014/01/30 职场文书
五心教育心得体会
2014/09/04 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
创业计划书之酒厂
2019/10/14 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python