通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法_javascript技巧

项目需求:如何通过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获取上传信息
js_ajax传递参数
ajax是前端还是后端、ajax前后端数据交互、ajax属于前端还是后端、前端传递token到后端、ajax serialize 后端,以便于您获取更多的相关知识。

时间: 2024-08-03 17:29:06

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

js获取上传文件大小示例代码

 js获取上传文件大小在ie下要改安全设置中的对为标记为可安全执行脚本的ActiveX空间初始化并执行,需要的朋友可以参考下 代码如下:  在ie下,貌似要改安全设置中的[对为标记为可安全执行脚本的ActiveX空间初始化并执行]那项     代码如下: <html>  <head>  <script type="text/javascript">  var isIE = /msie/i.test(navigator.userAgent) &

js获取上传文件的绝对路径实现方法_javascript技巧

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

js获取上传文件大小

问题描述 如题,主要是用来做验证的,要是不用获取就可以做验证的,那就更好了 解决方案 js一般是获取不到文件大小的,即使有时能,也是在特定浏览器版本下.使用js就涉及到浏览器的类型以及种类,判断文件大小还是比较麻烦的.一般判断文件大小都放在服务器端,如果时间太长,可以用ajax做异步效果解决方案二:要想在JS中即时的获取文件大小,必须借助于ActiveX控件来实现.比如Xproer.HttpUploader此控件是基于标准HTTP协议实现的文件上传功能.优势是扩展性非常好,整合简单,支持批量上传

escape函数解决js中ajax传递中文出现乱码问题_javascript技巧

本文实例讲述了escape函数解决js中ajax传递中文出现乱码问题,分享给大家供大家参考.具体方法如下: 一.问题描述: 本来网页特效中的escape()是将中文按iso-8859-1字符集进行url编码的,那样通过 request.getparameter()是能直接获取到请求参数的,但后来的javascript将escape()换成了unicode字符集编 码,如此一来,在jsp教程和servlet中就没法直接拿到请求参数了,具体原因我也不知道. 二.解决办法: 1.首先对中文字符进行两次

js实现接收表单的值并将值拼在表单action后面的方法_javascript技巧

本文实例讲述了js实现接收表单的值并将值拼在表单action后面的方法.分享给大家供大家参考,具体如下: 今天遇到一个问题,在form表单中有若干个input,其中有一个上传文件的input,现在需要在点击提交按钮时,将不是文件类型的input的值得到并拼成&name=value的格式加在action后面,这样就能一同传出去了 <form id="myform" name="myform" method="post" action=

JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端_javascript技巧

背景: 想在自己的网站中有这样一个设计: 用户点击提交按钮之后,就会打开本地邮件客户端,并自动将他在输入框中输入的内容作为邮件的内容,像下面这样: mailto可以帮助实现这个功能. 简介: mailto是一种电子邮件协议,通过该协议可以创建一个指向电子邮件地址的超级链接,通过该链接可以在Internet中发送电子邮件.就像在地址栏输入一个网址会打开一个网页一样,输入mailto:name@email.com,就会打开本地邮件客户端,并将邮件发送给name@email.com. 在HTML中使用

js提交form表单,并传递参数的实现方法_javascript技巧

//增加的函数 begin function queryFun(){ var type = $("#artType").val(); var hasInputed = "1";//表示输入了要搜索 的信息 if($("#query").val()=="选手姓名/编号"){ //表示没有输入要搜索的值 hasInputed="0"; } document.getElementById("queryF

JS实现点击复选框将按钮或文本框变为灰色不可用的方法_javascript技巧

本文实例讲述了JS实现点击复选框将按钮或文本框变为灰色不可用的方法.分享给大家供大家参考.具体如下: 在注册时候经常会看不到,如果不点击阅读注册许可的话,提交按钮是灰色的,失效不能提交,必须点它一下,这个JS代码就是实现这样一个功能,只有你点击了确认提交,下边的按钮才生效. 运行效果如下图所示: 具体代码如下: <html> <head> <title>点击复选框按钮变为不可用</title> </head> <script> var

用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法_javascript技巧

如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <script type="text/javascript"> funct