通过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 相关文章推荐
一段利用WSH获取登录时间的jscript代码
May 11 Javascript
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
仿迅雷焦点广告效果(JQuery版)
Nov 19 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
使用veloticy-ui生成文字动画效果
Feb 08 Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 Javascript
JS sort排序详细使用方法示例解析
Sep 27 Javascript
Vue 组件注册全解析
Dec 17 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
PHP教程 基本语法
2009/10/23 PHP
PHP页面间参数传递的四种方法详解
2013/06/09 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
jQuery hover 延时器实现代码
2011/03/12 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
python实现ipsec开权限实例
2014/11/11 Python
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
Python单元测试实例详解
2018/05/25 Python
详解python中docx库的安装过程
2019/11/08 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
专业实习自我鉴定
2013/10/29 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
导游词书写之黄山
2019/08/06 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
python创建字典及相关管理操作
2022/04/13 Python
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server