通过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 一段左右两边随屏滚动的代码
Jun 18 Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
JavaScript时间转换处理函数
Apr 14 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
JSONP跨域请求实例详解
Jul 04 Javascript
jquery——九宫格大转盘抽奖实例
Jan 16 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
js中int和string数据类型互相转化实例
Jan 16 Javascript
Nuxt.js实战和配置详解
Aug 05 Javascript
JavaScript实现缓动动画
Nov 25 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正则
2006/07/07 PHP
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
2013/12/30 Javascript
JSONP之我见
2015/03/24 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
python读写文件操作示例程序
2013/12/02 Python
为Python的web框架编写前端模版的教程
2015/04/30 Python
简单谈谈Python中的闭包
2016/11/30 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
python RabbitMQ 使用详细介绍(小结)
2018/11/08 Python
pytorch 共享参数的示例
2019/08/17 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
竞选班长演讲稿
2013/12/30 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
关于学习的决心书
2015/02/05 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
小学三年级作文之写景
2019/11/05 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
go语言求任意类型切片的长度操作
2021/04/26 Golang
Go并发4种方法简明讲解
2022/04/06 Golang