$(".rightContentDetail .modelDetail .buttonDiv button.save").off("click").on("click",function(){ var $form = $(this).parents("form"); $.post($form.attr("action"),$form.serialize(),function(retJson){ var r = $.parseJSON(retJson); alert(r["msg"]); if(r["secc"]){ $("#rightContentNav a.active .closeNav").click(); } }); });这段JS代码如何加上文件上传功能
时间: 2024-01-17 11:02:44 浏览: 174
jeecmsv5.1UML结构及描述
要在这段JS代码中添加文件上传功能,你需要使用HTML5的FormData对象和XMLHttpRequest对象来实现。
首先,给表单添加一个文件上传输入框:
```html
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<!-- 其他表单元素 -->
<button type="button" class="save">保存</button>
</form>
```
然后,在JS代码中,你需要监听文件上传按钮的click事件,获取文件数据,创建FormData对象,将文件数据添加到FormData中,然后使用XMLHttpRequest对象将FormData对象发送到服务器端:
```js
$(".rightContentDetail .modelDetail .buttonDiv button.save").off("click").on("click", function() {
var $form = $(this).parents("form");
var formData = new FormData($form[0]); // 创建FormData对象
$.ajax({
url: $form.attr("action"),
type: "POST",
data: formData,
processData: false, // 告诉jQuery不要处理FormData对象
contentType: false, // 告诉jQuery不要设置Content-Type请求头
success: function(retJson) {
var r = $.parseJSON(retJson);
alert(r["msg"]);
if(r["secc"]) {
$("#rightContentNav a.active .closeNav").click();
}
}
});
});
```
注意,在使用FormData对象时,需要将processData选项设置为false,告诉jQuery不要处理FormData对象;同时,也需要将contentType选项设置为false,告诉jQuery不要设置Content-Type请求头。这样,就可以实现文件上传功能了。
阅读全文