今天在论坛上看到这样一个问题,有必要编辑搜集下。

问题描述:怎么通过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传递给后端?的更多相关文章

  1. js 获取上传视频的时长、大小、后缀名

    参考资料:获取时长 var fileName = $("#sectionfileUpload").val(); //C:\fakepath\3.jpeg var exts = fi ...

  2. js获取上传文件内容(未完待续)

    js 获取上传文件的字节数及内容 <div> 上传文件 : <input type="file" name = "file" id = &qu ...

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

    Atitit.js获取上传文件全路径 1. 默认的value只能获取文件名..安全原因.. 1 2. Firefox浏览器的读取 1 3. Html5 的file api 2 4. 解决方法::使用a ...

  4. js获取上传文件内容

    js 获取上传文件的字节数及内容 <div> 上传文件 : <input type="file" name = "file" id = &qu ...

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

    <input type="file" id="fileBrowser" name="fileBrowser" size="5 ...

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

    在html中    <input type="file" id="importFile" />    <input type="bu ...

  7. js 获取上传文件的字节数及内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. js获取上传的文件并用ajax提交

    <form id="form1" name="form1" encType="multipart/form-data" method= ...

  9. JS获取上传文件的名称、格式、大小

    <input id="File1" type="file" onchange="checkFile(this)" /> 方式一) ...

随机推荐

  1. 【Android】开源项目UI控件分类汇总之ProgressBar

    Android开发的宝库越来越多,我开发中有需要的组件,主要参考Trinea的大作Android开源项目分类汇总(包含了后面的绝大多数).CSDN上直接拿来用!最火的Android开源项目还有CSDN ...

  2. 模拟Select-Options对象实现多项数据输入功能

       模拟Select-Options对象实现多项数据输入功能 Select-Options对象可以同时输入多项值并将所输入数据存入内表以供程序使用,不过Select-Options的功能有一定的局限 ...

  3. java中判断字符串是否为数字的方法

    一: //1.用JAVA自带的函数 public static boolean isNumeric(String str){ for (int i = 0; i < str.length(); ...

  4. Struts2原理

    Struts 2以WebWork优秀的设计思想为核心,吸收了Struts 1的部分优点,建立了一个兼容WebWork和Struts 1的MVC框架,Struts 2的目标是希望可以让原来使用Strut ...

  5. 【读书笔记】iOS-复制的种类

    一,你可以使用不同的方法复制对象.大多数对象都引用(即指向)其它对象. 二,浅层复制,不复制引用对象,新复制的对象只指向现有的引用对象.NSArray类的copy方法是浅层复制.当复制一个NSArra ...

  6. Android源码分析之SparseArray

    本来接下来应该分析MessageQueue了,可是我这几天正好在实际开发中又再次用到了SparseArray(之前有用到过一次,那次只是 大概浏览了下源码,没做深入研究),于是在兴趣的推动下,花了些时 ...

  7. Windows7下Blend for Visual Studio 2012使用问题

    目前开发的系统里很多控件样式和动画比较复杂,应该是之前同事用Blend做的,这种神器不用太浪费了,自己也准备试试. 系统环境Windows7+Visual Studio 2012 1.Windows7 ...

  8. Objective-C中常用的结构体NSRange,NSPoint,NSSize(CGSize),NSRect

    本节要点:红色标记 需要记下来 1   NSRange typedef struct _NSRange {     NSUInteger location;     NSUInteger length ...

  9. Bootstrap的优先级、选择器、伪类

    概述:Bootstrap的CSS组件的核心就是选择器的定义以及在各自优先级上的处理.由于大部分的选择器都非常的常见就一笔带过了,这里重点介绍一下Bootstrap用到的知识点. 一.优先级 之前我们使 ...

  10. gerrit添加新用户

    默认gerrit的web服务端口为8080,通过apache的反向代理就可以使用标准的80(HTTP)来访问gerrit的web界面,在apache的配置文件httpd.conf添加如下反向代理和HT ...