文档章节

使用FormData,进行Ajax请求并上传文件

11968033
 11968033
发布于 2016/11/03 10:04
字数 147
阅读 23
收藏 1

使用FormData,进行Ajax请求并上传文件 html代码

<form id= "uploadForm">  
      <p >指定文件名: <input type="text" name="name" value= ""/></p >  
      <p >上传文件: <input type="file" name="uploadFile"/></ p>  
      <input type="button" value="上传" onclick="doUpload()" />  
</form> 

js代码

function doUpload() {  
     var formData = new FormData($( "#uploadForm" )[0]);  
     formData .append("username", "Groucho");
     formData .append("accountnum", 123456); // 数字123456被立即转换成字符串"123456"

     // fileInputElement中已经包含了用户所选择的文件
     formData.append("userfile", fileInputElement.files[0]);
     $.ajax({  
          url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' ,  
          type: 'POST',  
          data: formData,  
          async: false,  
          cache: false,  
          contentType: false,  
          processData: false,  
          success: function (returndata) {  
              alert(returndata);  
          },  
          error: function (returndata) {  
              alert(returndata);  
          }  
     });  
} 

© 著作权归作者所有

11968033
粉丝 0
博文 1
码字总数 147
作品 0
成都
私信 提问
通过Ajax方式上传文件,使用FormData进行Ajax请求

通过传统的form表单提交的方式上传文件: Html代码 不过传统的form表单提交会导致页面刷新,但是在有些情况下,我们不希望页面被刷新,这种时候我们都是使用Ajax的方式进行请求的: Js代码 ...

文文1
2016/06/22
117
0
利用FormData进行ajax上传文件

个人实现方式: html代码 js代码: 后台python代码 很简洁的代码,便可以达到Ajax方式上传文件,上面的代码中使用<input type="file" />这种传统的选择文件的方法产生文件对象,HTML5还支持使...

单蛙
2016/06/17
3.5K
0
HTML5 FormData+Ajax上传文件表单

文件表单的数据类事multipart/form-data,因此,formData需要特殊处理. 文件上传 参考文章: HTML5 + AJAX ( 原生JavaScript ) 异步多文件上传 [HTML5] Blob对象 通过Ajax方式上传文件,使用...

IamOkay
2017/10/31
375
0
JS中使用FormData上传文件、图片的方法

转自http://www.jb51.net/article/89998.htm 参考:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/UsingFormDataObjects FormData 废话不多说,先上最后我用的完成版: 完整实......

lllo3o
2017/05/23
0
0
通过jQuery Ajax使用FormData对象上传文件

FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单"。在 Mozilla Developer 网站 使用FormData对象 有详尽的FormData对象使用说明。但上传...

郏高阳
2016/09/07
577
0

没有更多内容

加载失败,请刷新页面

加载更多

Replugin借助“UI进程”来快速释放Dex

public static boolean preload(PluginInfo pi) { if (pi == null) { return false; } // 借助“UI进程”来快速释放Dex(见PluginFastInstallProviderProxy的说明) return PluginFastInsta......

Gemini-Lin
今天
4
0
Hibernate 5 的模块/包(modules/artifacts)

Hibernate 的功能被拆分成一系列的模块/包(modules/artifacts),其目的是为了对依赖进行独立(模块化)。 模块名称 说明 hibernate-core 这个是 Hibernate 的主要(main (core))模块。定义...

honeymoose
今天
4
0
CSS--属性

一、溢出 当内容多,元素区域小的时候,就会产生溢出效果,默认是纵向溢出 横向溢出:在内容和容器之间再套一层容器,并且内部容器要比外部容器宽 属性:overflow/overflow-x/overflow-y 取值...

wytao1995
今天
4
0
精华帖

第一章 jQuery简介 jQuery是一个JavaScript库 jQuery具备简洁的语法和跨平台的兼容性 简化了JavaScript的操作。 在页面中引入jQuery jQuery是一个JavaScript脚本库,不需要特别的安装,只需要...

流川偑
今天
7
0
语音对话英语翻译在线翻译成中文哪个方法好用

想要进行将中文翻译成英文,或者将英文翻译成中文的操作,其实有一个非常简单的工具就能够帮助完成将语音进行翻译转换的软件。 在应用市场或者百度手机助手等各大应用渠道里面就能够找到一款...

401恶户
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部