当前位置: 代码迷 >> 综合 >> 使用jquery中ajax 上传文件
  详细解决方案

使用jquery中ajax 上传文件

热度:63   发布时间:2023-11-02 01:22:55.0

1.代码html

<form id="formImg" action="" οnsubmit="ajaxUpload();"
        enctype="multipart/form-data" method="post"
>
        <input type="file" name="file"> 
        <input type="text" name="type" value="1">
        <input type="submit">
  </form>

注意:上传类型必须改为: enctype="multipart/form-data" method="post"

 

2.js代码

function ajaxUpload() {
        event.preventDefault(); //阻止form表单默认提交
        $.ajax({
            url : "/document/upload",
            type : "POST",
            dataType : "json",
            cache : false,
            data : new FormData($("#formImg")[0]),//获取表单数据
            processData : false,// 不处理数据
            contentType : false, // 不设置内容类型
            success : function(data) {
                console.log(data);
            }
        });
        return false;
    }

注意:new FormData($("#formImg")[0]),//获取表单数据时,加上[0]是将jquery对象转为js对象

3.阻止form表单默认提交跳转的方法

1): 代码加入  event.preventDefault(); //阻止form表单默认提交;

(2):在onsubmit提交写成:οnsubmit="return ajaxUpload();"  在ajaxUpload();方法中返回:return false;也可以阻止表单默认提交跳转

  相关解决方案