通过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 相关文章推荐
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
JavaScript中创建原子的方法总结
Aug 26 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 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/06/12 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
JavaScript中的集合及效率
2010/01/08 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
详解vue路由
2020/08/05 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
个人自我鉴定怎么写
2013/10/28 职场文书
思想汇报范文
2013/11/04 职场文书
小学教育毕业生自荐信
2013/11/18 职场文书
大学生社团活动总结
2014/04/26 职场文书
校本教研活动总结
2014/07/01 职场文书
务虚会发言材料
2014/12/25 职场文书
小学运动会开幕词
2016/03/04 职场文书