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

问题描述:怎么通过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. Javascript中void操作符

    Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值. void操作符用法格式如下:1.javascript:void (expression)2.javascript ...

  2. PHP json编码遇到的问题

    今天遇到了json编码解码之后中文消失的问题,一探究竟,写下这篇文章 PHP中提供了json_encode  和json_decode 这对函数 将PHP中 值转化成 字符串,但是遇到中文的时候,很容 ...

  3. ADO.NET 增删改查的基本用法

    ADO.NET:数据访问技术 就是将C#和MSSQL连接起来的一个纽带 可以通过ADO.NET将内存中的临时数据写入到数据库中也可以将数据库中的数据提取到内存中供程序调用 所有数据访问技术的基础 连接 ...

  4. js和html5实现画板

    html5新添了一个重要又强大的标签元素<canvas>,该标签真有彻底替换掉flash的尽头,现在很多网页游戏就是用<canvas>完成的,下面代码就是用该标签制作的一个画板 ...

  5. WPF下递归生成树形数据绑定到TreeView上

    最终效果图:(用于学习类的效果 图片丑了点,看官莫怪) 新建窗体 然后在前端适当位置插入如下代码: <TreeView x:Name="> <TreeView.ItemTe ...

  6. sharepoint 顺序工作流创建

    顺序工作流提供了一系列有组织的步骤,一般情况下,步骤是逐一执行的. 1.新建 > 项目,选择 SharePoint解决方案 > 空项目: 2.部署为场解决方案 3.添加 > 新项,选 ...

  7. SharePoint 页面中添加.Net代码

    今天整理资料,看到一个非常有意思的截图,可以在SharePoint页面库里的页面中,添加.Net代码,只需修改一下相应应用程序的web.config文件,即可: 在web.config里面的<P ...

  8. [ html canvas 模仿支付宝刮刮卡效果 ] canvas绘图属性 模仿支付宝刮刮卡效果实例演示

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  9. Sharepoint学习笔记—习题系列--70-573习题解析 -(Q54-Q56)

    Question 54You create custom code to import content to SharePoint sites.You create a custom site def ...

  10. ubuntu解决arm-linux-gcc no such file的问题

    这种情况是因为你的操作系统是Ubuntu 64位的,而交叉编译工具链都是32位执行程序.要成功运行这些交叉编译工具链,需要与这些工具链相关的32位库.安装命令如下:sudo apt-get insta ...