通过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 相关文章推荐
js 分栏效果实现代码
Aug 29 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 Javascript
基于JS实现html中placeholder属性提示文字效果示例
Apr 19 Javascript
VUE实现图片验证码功能
Nov 18 Javascript
详解Vue中的watch和computed
Nov 09 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
基于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
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
jquery控制display属性为none或block
2014/03/31 Javascript
JQuery中$(document)是什么意思有什么作用
2014/07/21 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
2020/02/12 Javascript
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
Python模块搜索路径代码详解
2018/01/29 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
Pandas的Apply函数具体使用
2020/07/21 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
《和田的维吾尔》教学反思
2014/04/14 职场文书
2015年教学工作总结
2015/04/02 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
python套接字socket通信
2022/04/01 Python