随笔- 137 文章- 0 评论- 34 阅读- 97万

input[type=file]中使用ajaxSubmit来图片上传

　　今天在使用input[type=file]上传图片到服务器时，因为项目要求，并不是像常见的通过按钮来提交表单事件，而是图片上传后就自动执行表单提交事件，将上传的图片信息传给服务器。

　　刚开始我是这样执行的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .file{
            width: 75px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            background-color: green;
            position:relative;
        }
        .file input{
            width: 75px;
            height: 25px;
            opacity:0;
            filter:alpha(opacity=0);
            position:absolute;
            left:0;
            top:0;
        }
        #dd{
            display: none;
        }
    </style>
</head>
<body>
    <form action="接口的url" name="file" class="file">
        上传文件
        <input type="file" id="img" name="file">
    </form>
    <div id="dd"></div>
    <script>
        var file = document.getElementById("img");
        file.onchange = function(){
            var files = this.files;
            for(var i=0;i<files.length;i++){
                readers(files[i])
            }
        }
        function readers(fil){
            var reader = new FileReader();
            reader.readAsDataURL(fil);
            reader.onload = function(){
                form.submit();  // 文件上传后执行表单提交事件
            }; 
        }
    </script>
</body>
</html>

　　后来发现不行，原来是form标签里缺少一句很重要的代码：enctype="multipart/form-data" 还有一个问题就是input[type=file]的name值必须为file，改好后，能将图片上传到指定服务器，但同时，新的问题产生了，那就是表单提交后，该页面会发生跳转，跳转到接口地址，这不是我想要的，我想要的是表单提交后，跳转到一个进度条页面，来展示图片处理的进度。

　　于是不得不寻求新的方法，在网上看到有ajaxSubmit这种方法，这是jquery中的一种方法，使用这种方法，需要引入jquery文件以及jquery.form文件。而后就是去掉form表单中action的值，代码如下：

<script>
    $(function(){
    $("#img").change(function(){
        var file = this.files;
        console.log(file)
            for(var i=0;i<file.length;i++){
            readFiles(file[i])
            }
    })
    function readFiles(file){
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(){
            $('form').ajaxSubmit({
            method:'post',
            url:'', // 上传的接口地址
            success: function(data,s, status){ 
            //上传成功之后的操作。跳转到新的页面，后面是需要传递的参数，这里使用了模版字符串
            window.location.href = `progress.html?key=${data.body.key}&date=${data.body.date}` 
            },
                    error: function (data, status, e){ 
            //上传失败之后的操作
             alert("上传失败")
            }  
            })
            };
    } 
    )}                   