通过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 delete 使用示例代码
Mar 29 Javascript
Javascript玩转继承(一)
May 08 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 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
第九节--绑定
2006/11/16 PHP
利用curl抓取远程页面内容的示例代码
2013/07/23 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
JavaScript 事件对象的实现
2009/07/13 Javascript
Js 刷新框架页的代码
2010/04/13 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
python错误处理详解
2014/09/28 Python
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
详细解读Python中的__init__()方法
2015/05/02 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
python的等深分箱实例
2019/11/22 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
Python telnet登陆功能实现代码
2020/04/16 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
python request 模块详细介绍
2020/11/10 Python
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
实习公司领导推荐函
2014/05/21 职场文书
酒店开业策划方案
2014/06/02 职场文书
会议开幕词
2015/01/28 职场文书
红色经典观后感
2015/06/18 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书