前端文件表单/ajax上传实例代码

表单上传文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文件上传</title>
</head>
<body>
<form action="/attach/upload" enctype="multipart/form-data" method="post">
    <input type="file" name="content" /> <br>
    <input type="submit" value="上传" />
</form>
</body>
</html>

ajax文件上传

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试ajax文件上传</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css"/>
    <style>
        .upload_image_input_trigger {
            position: relative;
            display: inline-block;
            margin-left: 10px;
            margin-right: 10px;
            overflow: hidden;
        }
        .upload_image_input {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0;
        }
        .box {
            600px;
            margin: 50px auto;
        }
    </style>
</head>
<body>
<div class="box">
    <a href="javascript:;" style="margin-top:-4px;" class="btn btn-default upload_image_input_trigger">
        <span>上传图片</span>
        <input class="upload_image_input" type="file" accept=".png, .jpg, .jpeg">
    </a>
</div>

<script>
    $(function(){

        $(".upload_image_input").on('change',function(){
            var  cur_obj = $(this);
            var  file_obj  = this.files[0];
            if(file_obj === undefined){
                layer.msg('没有选择文件');
                return;
            }
            if (file_obj.size > 2097152) {
                layer.msg("图片大小不能超过2M");
                return;
            }
            var formData = new FormData();
            formData.append("type", "image");//其它参数
            formData.append("content", file_obj);//文件对象
            $.ajax({
                url: '/attach/upload',
                type: 'POST',
                dataType: "json",
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: function () {
                    cur_obj.parent().find('span').html('上传中');
                },
                success: function(result){
                    console.log(result);
                    cur_obj.parent().find('span').html('上传图片完成');
                    alert("success");
                }
            });
        });
    });
</script>
</body>
</html>

文件上传请求头

base64上传

Content-Disposition: form-data; name="icon"; filename=""
Content-Type: application/octet-stream

文件流上传：

Content-Disposition: form-data; name="upload_file"; filename="007c1Ibkgy1g58mg18i78j30u01hcwy4.jpg"
Content-Type: image/jpeg

表单提交

Content-Type: application/x-www-form-urlencoded