通过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 相关文章推荐
面向对象的Javascript之一(初识Javascript)
Jan 20 Javascript
jQuery实现单行文字间歇向上滚动源代码
Jun 02 Javascript
js onclick事件传参讲解
Nov 06 Javascript
做好七件事帮你提升jQuery的性能
Feb 06 Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
了解JavaScript函数中的默认参数
May 30 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 Javascript
JS异步宏队列微队列原理详解
Sep 09 Javascript
Vue看了就会的8个小技巧
Jan 21 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
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
php函数实现判断是否移动端访问
2015/03/03 PHP
PHP检测链接是否存在的代码实例分享
2016/05/06 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
node.js中的events.emitter.removeAllListeners方法使用说明
2014/12/10 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
python网络爬虫采集联想词示例
2014/02/11 Python
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
django输出html内容的实例
2018/05/27 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
python怎么提高计算速度
2020/06/11 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
巴西在线鞋店:Shoestock
2017/10/28 全球购物
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
高三自我鉴定
2013/10/23 职场文书
租房协议书范本
2014/04/09 职场文书
党支部承诺书
2015/01/20 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书
实操Python爬取觅知网素材图片示例
2021/11/27 Python