ajax 保存返回的图片路径,怎么通过js获取上传的图片信息（临时保存路径，名称，大小）然后通过ajax传递给后端？...

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

问题描述：怎么通过js获取上传的图片信息(临时保存路径，名称，大小)然后通过ajax传递给后端

题主用jquery接收

用的方法是：

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 获取上传视频的时长、大小、后缀名

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

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

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

上传文件 :

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

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

js获取上传文件内容

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

上传文件 :

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

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

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

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

方式一) ...

随机推荐

.net平台下C#socket通信(上)

在开始介绍socket前先补充补充基础知识,在此基础上理解网络通信才会顺理成章,当然有基础的可以跳过去了.都是废话,进入正题. TCP/IP:Transmission Control Protocol ...

python学习之if语句

1.if条件表达式判断 ##判断条件是true or false var1=10 if var1: print("true") print(var1) else: print(&q ...

【服务器环境搭建-Centos】tmpfs，【转载】

转载来源:http://www.linuxidc.com/Linux/2013-12/93747.htm tmpfs介绍 tmpfs是一种虚拟内存文件系统,而不是块设备.是基于内存的文件系统,创建时不 ...

JS一些语法

1.解构(ES6的语法) 我个人理解就是有一个对象,对象里有几个属性,然后在定义新的变量的时候可以直接指定为和对象里属性名一样的名字,然后就可以关联到新的变量上来.下面看一个小测试例子: //解构 l ...

javascript基础 之 代码规范

1,变量名 1,变量名推荐使用小驼峰写法:类似于:firstName 2,全局变量和常量建议用大写:PI 3,支持下划线 2,缩进 1,一般使用4个空格当作缩进,tab建议少用 2,运算符左右和左花括 ...

使用eclipse初步学习vue.js的基本操作 ①

一.vue.js的初步认识 vue.js下载 1.抛开手动操作DOM的思维,Vue ...

Chrome之控制台使用【转载】

原文链接:https://segmentfault.com/a/1190000002511877 关键API: console.log(); console.info(); console.warn( ...

PXE(preboot execution environment)：【网络】预启动执行环节：安装 ubuntu、rehat系列：成功

必要条件: 网卡硬件支持 搭建相配套的DHCP\TFTP\HTTP(或FTP)后端服务器:推荐pxesrv,好用! 准备必要的pxe引导文件:pxelinux.0.menu.c32,该2位来自sysl ...

linux安装rabbitmq以及相关的操作命令

1.安装rabbitmqa)进入rabbitmq文件的存放目录b)rpm -ivh rabbitmq-server-3.5.4-1.noarch.rpm2.修改配置cd /etc/rabbitmqcd ...

Spring Boot + Spring Cloud 实现权限管理系统 后端篇(二十)：服务熔断(Hystrix、Turbine)

在线演示 演示地址:http://139.196.87.48:9002/kitty 用户名:admin 密码:admin 雪崩效应 在微服务架构中,由于服务众多,通常会涉及多个服务层级的调用,而一旦基 ...