js 上传图片和数据

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title> FormData Demo </title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript">

function fsubmit(){
    var formData = new FormData($('#form')[0]);
    formData.append('img', document.getElementById('file').files[0]);
    formData.append('title', $("#title").val());
    formData.append('title', $("#pid").val());
    formData.append('title', $("#content").val());
    formData.append('_token', "{{csrf_token()}}");

    console.log(formData)
    $.ajax({
        url:'/admin/category/create',
        type:'POST',
        dataType:'json',
        data:formData,
        cache: false,//上传文件无需缓存
        processData: false,//用于对data参数进行序列化处理 这里必须false
        contentType: false, //必须
        success:function(res){
            console.log(res);

        },
        error:function (error){
            alert('错误')
        }
    });


</script>

</head>

<body>
<form name="form1" id="form1">
<p>name:<input type="text" name="name" ></p>
<p>gender:<input type="radio" name="gender" value="1">male <input type="radio" name="gender" value="2">female</p>
<p>photo:<input type="file" name="photo" id="photo"></p>
<p><input type="button" name="b1" value="submit" οnclick="fsubmit()"></p>
</form>
<div id="result"></div>
</body>
</html>

posted @ 2021-11-05 17:09  星云惊蛰  阅读(270)  评论(0)    收藏  举报