通过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 25 Javascript
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
js图片处理示例代码
May 12 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
js中hash和ico的关联分析
Feb 05 Javascript
实例详解angularjs和ajax的结合使用
Oct 22 Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
详解webpack自定义loader初探
Aug 29 Javascript
vue实现可拖拽的dialog弹框
May 13 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
jquery.validate使用详解
2016/06/02 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
vuex实现数据状态持久化
2019/11/11 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
Python提取频域特征知识点浅析
2019/03/04 Python
详解Python的三种可变参数
2019/05/08 Python
python基于property()函数定义属性
2020/01/22 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
《少年王冕》教学反思
2014/04/11 职场文书
保研专家推荐信范文
2015/03/25 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS