前端文件表單/ajax上傳實例代碼

時間 2019-11-17

標籤前端文件表單 ajax 上傳實例代碼欄目 HTML 简体版

原文原文鏈接

表單上傳文件

<!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 {
            width: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>