通过Ajax方式上传文件(input file)，使用FormData进行Ajax请求

红太狼 2021-09-15 03:20 518阅读 0赞

`<` `div` `>`

`    <` `input`  `type="file" name="FileUpload" id="FileUpload">`

`    <` `a`  `class="layui-btn layui-btn-mini" id="btn_uploadimg">上传图片</` `a` `>`

`</` `div` `>`

``

`<script type=` `"text/jscript"` `>`

`       ` `$(` `function`  `() {`

`           ` `$(` `"#btn_uploadimg"` `).click(` `function`  `() {`

`               ` `var`  `fileObj = document.getElementById(` `"FileUpload"` `).files[0]; ` `// js 获取文件对象`

`               ` `if`  `(` `typeof`  `(fileObj) == ` `"undefined"`  `|| fileObj.size <= 0) {`

`                   ` `alert(` `"请选择图片"` `);`

`                   ` `return` `;`

`               ` `}`

`               ` `var`  `formFile = ` `new`  `FormData();`

`               ` `formFile.append(` `"action"` `, ` `"UploadVMKImagePath"` `);  `

`               ` `formFile.append(` `"file"` `, fileObj); ` `//加入文件对象`

`               ` `//第一种  XMLHttpRequest 对象`

`               ` `//var xhr = new XMLHttpRequest();`

`               ` `//xhr.open("post", "/Admin/Ajax/VMKHandler.ashx", true);`

`               ` `//xhr.onload = function () {`

`               ` `//    alert("上传完成!");`

`               ` `//};`

`               ` `//xhr.send(formFile);`

`               ` `//第二种 ajax 提交`

`               ` `var`  `data = formFile;`

`               ` `$.ajax({`

`                   ` `url: ` `"/Admin/Ajax/VMKHandler.ashx"` `,`

`                   ` `data: data,`

`                   ` `type: ` `"Post"` `,`

`                   ` `dataType: ` `"json"` `,`

`                   ` `cache: ` `false` `,` `//上传文件无需缓存`

`                   ` `processData: ` `false` `,` `//用于对data参数进行序列化处理 这里必须false`

`                   ` `contentType: ` `false` `, ` `//必须`

`                   ` `success: ` `function`  `(result) {`

`                       ` `alert(` `"上传完成!"` `);`

`                   ` `},`

`               ` `})`

`           ` `})`

`       ` `})`

`   ` `</script>`

补充 IE8 不支持.files 写法

发表评论取消回复

表情：

评论列表（有 0 条评论，518人围观）

还没有评论，来说两句吧...

相关阅读

相关通过Ajax方式上传文件，使用FormData进行Ajax请求

过传统的form表单写上传多图的时候发现 <form id= "uploadForm" action= "/file/upload" method= "post...

矫情吗；*/ 2024年04月18日 12:03/ 0 赞/ 34 阅读

相关 ajax上传文件formData

优秀的程序员从不墨迹，直接上示例代码：前端代码： <!DOCTYPE html> <html> <head> <meta chars

迈不过友情╰/ 2023年09月27日 10:23/ 0 赞/ 122 阅读

相关通过jQuery Ajax使用FormData对象上传文件

但上传文件部分只有底层的`XMLHttpRequest`对象发送上传请求，那么怎么通过`jQuery`的`Ajax`上传呢？本文将介绍通过`jQuery`使用`FormD

蔚落/ 2022年07月16日 09:40/ 0 赞/ 226 阅读

相关 input=file 通过Ajax上传

input类型设为file： <label for="img_input"></label> <input id="img_input" type="fi

小鱼儿/ 2022年06月08日 14:24/ 0 赞/ 188 阅读

相关通过Ajax方式上传文件，使用FormData进行Ajax请求

转载自：[http://yunzhu.iteye.com/blog/2177923][http_yunzhu.iteye.com_blog_2177923] 通过

曾经终败给现在/ 2022年05月17日 07:59/ 0 赞/ 210 阅读

相关 ajax实现文件上传（使用FormData）

文件上传一般是同过表单来上传，但表单提交不满足所有情况，部分情况需要ajax上传文件 <input type="file" id="file"> js获取文件

系统管理员/ 2022年04月05日 05:29/ 0 赞/ 749 阅读

相关通过Ajax方式上传文件(input file)，使用FormData进行Ajax请求

`<` `div` `>` ` <` `input` `type="file" name="FileUpload" id="FileUpload">` ` <

红太狼/ 2021年09月15日 03:20/ 0 赞/ 519 阅读

相关 H5 通过Ajax方式上传文件，使用FormData进行Ajax请求

通过传统的form表单提交的方式上传文件： Html代码 ![收藏代码][icon_star.png] 1. <form id= "uploadForm" acti

青旅半醒/ 2021年09月14日 13:28/ 0 赞/ 565 阅读

相关通过Ajax方式上传文件，使用FormData进行Ajax请求

[http://m.blog.csdn.net/inuyasha1121/article/details/51915742][http_m.blog.csdn.net_inuy

Love The Way You Lie/ 2021年09月14日 11:48/ 0 赞/ 445 阅读

相关 Ajax formData上传文件 + 进度条

// require('./lib/ajax'); require('jquery'); var type=0,//0 dp 1 mt

小咪咪/ 2021年06月24日 15:58/ 0 赞/ 576 阅读