怎么通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端?
今天在论坛上看到这样一个问题,有必要编辑搜集下。
问题描述:怎么通过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传递给后端?的更多相关文章
- js 获取上传视频的时长、大小、后缀名
参考资料:获取时长 var fileName = $("#sectionfileUpload").val(); //C:\fakepath\3.jpeg var exts = fi ...
- js获取上传文件内容(未完待续)
js 获取上传文件的字节数及内容 <div> 上传文件 : <input type="file" name = "file" id = &qu ...
- Atitit.js获取上传文件全路径
Atitit.js获取上传文件全路径 1. 默认的value只能获取文件名..安全原因.. 1 2. Firefox浏览器的读取 1 3. Html5 的file api 2 4. 解决方法::使用a ...
- js获取上传文件内容
js 获取上传文件的字节数及内容 <div> 上传文件 : <input type="file" name = "file" id = &qu ...
- JS获取上传文件的绝对路径,兼容IE和FF
<input type="file" id="fileBrowser" name="fileBrowser" size="5 ...
- js获取上传文件的绝对路径
在html中 <input type="file" id="importFile" /> <input type="bu ...
- js 获取上传文件的字节数及内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js获取上传的文件并用ajax提交
<form id="form1" name="form1" encType="multipart/form-data" method= ...
- JS获取上传文件的名称、格式、大小
<input id="File1" type="file" onchange="checkFile(this)" /> 方式一) ...
随机推荐
- 【Android】开源项目UI控件分类汇总之ProgressBar
Android开发的宝库越来越多,我开发中有需要的组件,主要参考Trinea的大作Android开源项目分类汇总(包含了后面的绝大多数).CSDN上直接拿来用!最火的Android开源项目还有CSDN ...
- 模拟Select-Options对象实现多项数据输入功能
模拟Select-Options对象实现多项数据输入功能 Select-Options对象可以同时输入多项值并将所输入数据存入内表以供程序使用,不过Select-Options的功能有一定的局限 ...
- java中判断字符串是否为数字的方法
一: //1.用JAVA自带的函数 public static boolean isNumeric(String str){ for (int i = 0; i < str.length(); ...
- Struts2原理
Struts 2以WebWork优秀的设计思想为核心,吸收了Struts 1的部分优点,建立了一个兼容WebWork和Struts 1的MVC框架,Struts 2的目标是希望可以让原来使用Strut ...
- 【读书笔记】iOS-复制的种类
一,你可以使用不同的方法复制对象.大多数对象都引用(即指向)其它对象. 二,浅层复制,不复制引用对象,新复制的对象只指向现有的引用对象.NSArray类的copy方法是浅层复制.当复制一个NSArra ...
- Android源码分析之SparseArray
本来接下来应该分析MessageQueue了,可是我这几天正好在实际开发中又再次用到了SparseArray(之前有用到过一次,那次只是 大概浏览了下源码,没做深入研究),于是在兴趣的推动下,花了些时 ...
- Windows7下Blend for Visual Studio 2012使用问题
目前开发的系统里很多控件样式和动画比较复杂,应该是之前同事用Blend做的,这种神器不用太浪费了,自己也准备试试. 系统环境Windows7+Visual Studio 2012 1.Windows7 ...
- Objective-C中常用的结构体NSRange,NSPoint,NSSize(CGSize),NSRect
本节要点:红色标记 需要记下来 1 NSRange typedef struct _NSRange { NSUInteger location; NSUInteger length ...
- Bootstrap的优先级、选择器、伪类
概述:Bootstrap的CSS组件的核心就是选择器的定义以及在各自优先级上的处理.由于大部分的选择器都非常的常见就一笔带过了,这里重点介绍一下Bootstrap用到的知识点. 一.优先级 之前我们使 ...
- gerrit添加新用户
默认gerrit的web服务端口为8080,通过apache的反向代理就可以使用标准的80(HTTP)来访问gerrit的web界面,在apache的配置文件httpd.conf添加如下反向代理和HT ...