怎么通过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上传也能实现的。

时间: 2024-08-02 23:02:22

怎么通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端?的相关文章

Atitit.js获取上传文件全路径

1. 默认的value只能获取文件名..安全原因.. 1 2. Firefox浏览器的读取 1 3. Html5 的file api 2 4. 解决方法::使用applet插件 2 5. 参考 3 1. 默认的value只能获取文件名..安全原因.. js是无法获取file 控件的值的,你要获取的话可以通过后台程序语言用json或者xml之类的格式来返回被上传的文件路径. file是一种特殊的input,不能被赋值,也不能被javascript取值,只能随表单提交,而且随表单提交的也是file路

js获取上传文件的绝对路径

在html中    <input type="file" id="importFile" />    <input type="button" onclick="upload()"/> <script>function upload() {    var filename = document.getElementById("importFile").value;    

JS 获取上传文件的内容

<div> 上传文件 : <input type="file" name = "file" id = "fileId" /> <button type = "submit" name = "btn" value = "提交" id = "btnId" onclick="check()" /> 提交 </di

struts2 JS获取上传文件的绝对路径,兼容IE和FF

因为file控件上传失败后会自动清空,所以使用文本框来保存上传路径,而且在不同的浏览器下,控件的样式也需要兼容.下面是自己用到的实例 // 初始化判断浏览器的版本,根据版本的不同使用不同的样式function getExplorer() { //IE if (navigator.userAgent.indexOf("MSIE")>=0) { document.getElementById("1").style.display = "block&quo

js获取上传文件内容,ajax提交

<from action="" enctype="multipart/form-data" method="post"> <a> <span>修改头像</span> <input type="file" id="fileUp" accept="image/png,image/jpeg"> </a></from&

js获取上传文件的大小和名称

代码如下: 上传:<input type="file" style="width: 500px;" onchange="fileChange(this);"/> <script type="text/javascript"> function fileChange(target){ var isIE = /msie/i.test(navigator.userAgent) && !wind

js获取上传文件后缀名(附js提交form表单)

代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script> function check_file()  {   var strFileName=form1.FileName.value;   if (strFileName=="")   {     alert(&

js获取上传的文件名

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script> <script type="text/javascript&q

js获取上传文件信息并及时查看

<form id="picForm" name="picForm"  method="post" enctype="multipart/form-data"> <input type="file" id="photosfile" name="files" /> <button class="btn">请选择上传图