通过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 相关文章推荐
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
Jul 22 Javascript
jquery ajax方式直接提交整个表单核心代码
Aug 15 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
vue.js购物车添加商品组件的方法
Sep 17 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
Node 模块原理与用法详解
May 13 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
php 表单验证实现代码
2009/03/10 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
IE无法设置短域名下Cookie
2010/09/23 Javascript
js验证模型自我实现的具体方法
2013/06/21 Javascript
jQuery学习笔记之toArray()
2014/06/09 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
python3安装speech语音模块的方法
2018/12/24 Python
详解如何设置Python环境变量?
2019/05/13 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
Python更换pip源方法过程解析
2020/05/19 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
介绍一下linux的文件系统
2012/03/20 面试题
中学老师的自我评价
2013/11/07 职场文书
高中军训感言800字
2014/03/05 职场文书
社区居务公开实施方案
2014/03/27 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
2015年企业新年寄语
2014/12/08 职场文书
大学生入党自荐书
2015/03/05 职场文书
质检员工作总结2015
2015/04/25 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
go开发alertmanger实现钉钉报警
2021/07/16 Golang
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL