通过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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
JS中表单的使用小结
Jan 11 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
使用变量动态设置js的属性名
Oct 19 Javascript
JavaScript中window.open用法实例详解
Apr 15 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
javascript实现简易计算器
Feb 01 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
初识 Vue.js 中的 *.Vue文件
Nov 22 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
微信小程序实现带放大效果的轮播图
May 26 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/06/05 PHP
php生成随机数的三种方法
2014/09/10 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
javascript Array.remove() 数组删除
2009/08/06 Javascript
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
详解JavaScript树结构
2017/01/09 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
详解Django框架中的视图级缓存
2015/07/23 Python
Django项目中包含多个应用时对url的配置方法
2018/05/30 Python
Python语法分析之字符串格式化
2019/06/13 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
Python dict的常用方法示例代码
2020/06/23 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
详解python程序中的多任务
2020/09/16 Python
python Gabor滤波器讲解
2020/10/26 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
后勤工作职责
2013/12/22 职场文书
简单租房协议书范本
2014/08/20 职场文书
学习考察心得体会
2014/09/04 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang