通过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.4 中的Ajax问题
Jan 23 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
基于jquery实现人物头像跟随鼠标转动
Aug 23 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
JavaScript中Date对象的常用方法示例
Oct 24 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
Angular2 父子组件通信方式的示例
Jan 29 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 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
ThinkPHP访问不存在的模块跳转到404页面的方法
2014/06/19 PHP
PHP微信支付开发实例
2016/06/22 PHP
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
jquery获取复选框被选中的值
2014/03/22 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
JS hashMap实例详解
2016/05/26 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
windows下Virtualenvwrapper安装教程
2017/12/13 Python
python语言基本语句用法总结
2019/06/11 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
企业面试题试卷附带答案
2015/12/20 面试题
前台接待员岗位职责
2014/01/02 职场文书
家长给老师的道歉信
2014/01/13 职场文书
物业消防安全责任书
2014/07/23 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
离职证明标准格式
2014/09/15 职场文书
作文评语集锦
2014/12/25 职场文书
民事上诉状范文
2015/05/22 职场文书
高中班长竞选稿
2015/11/20 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书