通过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 相关文章推荐
5款Javascript颜色选择器
Oct 25 Javascript
用jQuery扩展自写的 UI导航
Jan 13 Javascript
js 返回时间戳所对应的具体时间
Jul 20 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
jQuery插件开发汇总
May 15 Javascript
详解数组Array.sort()排序的方法
May 09 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
angular使用bootstrap方法手动启动的实例代码
Jul 18 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
AJAX检测用户名是否存在的方法
Mar 24 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生成静态页面详解
2006/12/05 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
PHP微信API接口类
2016/08/22 PHP
PDO::getAttribute讲解
2019/01/28 PHP
php精度计算的问题解析
2019/06/21 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
JavaScript触发器详解
2007/03/10 Javascript
document.getElementById介绍
2011/09/13 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
javaScript基础详解
2017/01/19 Javascript
Bootstrap框架安装使用详解
2017/01/21 Javascript
javascript中replace使用方法总结
2017/03/01 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
跟老齐学Python之复习if语句
2014/10/02 Python
Python性能优化的20条建议
2014/10/25 Python
基于python 字符编码的理解
2017/09/02 Python
Tensorflow卷积神经网络实例
2018/05/24 Python
Linux下多个Python版本安装教程
2018/08/15 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
python asyncio 协程库的使用
2021/01/21 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
医生爱岗敬业演讲稿
2014/08/26 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
活动经费申请报告
2015/05/15 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL