通过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事件列表解说
Dec 22 Javascript
jQuery操作select的实例代码
Jun 14 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
Dec 25 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 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
Zerg兵种介绍
2020/03/14 星际争霸
简单的过滤字符串中的HTML标记
2006/12/25 PHP
PHP三层结构(上) 简单三层结构
2010/07/04 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
js实现放大镜特效
2017/05/18 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
学习python类方法与对象方法
2016/03/15 Python
python语言中with as的用法使用详解
2018/02/23 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
python实现多层感知器
2019/01/18 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
python 两个数据库postgresql对比
2019/10/21 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
秋季运动会表扬稿
2014/01/16 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
医院消毒隔离制度
2015/08/05 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers