通过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 遍历验证所有文本框的值
Aug 27 Javascript
Javascript的一种模块模式
Sep 08 Javascript
javascript Array.prototype.slice使用说明
Oct 11 Javascript
Three.js源码阅读笔记(Object3D类)
Dec 27 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
JS随机漂浮广告代码具体实例
Nov 19 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 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
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
php生成curl命令行的方法
2015/12/14 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
javascript之ESC(第二类混淆)
2007/05/06 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
2015/08/21 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
对Vue beforeRouteEnter 的next执行时机详解
2018/08/25 Javascript
微信小程序开发实现消息推送
2020/11/18 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
python3.3实现乘法表示例
2014/02/07 Python
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
python中upper是做什么用的
2020/07/20 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
在html页面中取得session中的值的方法
2020/08/11 HTML / CSS
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
某科技软件测试面试题
2013/05/19 面试题
高级护理专业大学生求职信
2013/10/24 职场文书
关于人生的感言
2014/01/17 职场文书
孝敬父母的演讲稿
2014/05/14 职场文书
Linux中文件的基本属性介绍
2022/06/01 Servers
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle