zeopt 异步上传图片

经google后，解决方案基本一致，皆使用formData来ajax post

 

坑1

　　var formData = new FormData();  formData.append("data", data); 后，通过 console.log(formData);  控制台中的formData 内是不会有任何的属性的。不会有。

 

坑2 不同版本的zeopt，处理 formData 的方式不一样

                $.ajax({
                    url: "http://up-z2.qiniu.com/",
                    type: "POST",
                    data: formData,
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    success: function (result) {
                        console.log(result);
                    },
                    error: function (error) {
                        console.log(error);
                    }
                });

例如：1.0rc1，就会失败

 

而 1.2.0 的form会是

 

坑3 $.ajax() 中 contentType: false 问题

                $.ajax({
                    url: "http://up-z2.qiniu.com/",
                    type: "POST",
                    data: formData,
                    dataType: 'json',
                    contentType: false,　　// 不可用的情况是 "mulitipart/form-data"
                    processData: false,
                    success: function (result) {
                        console.log(result);
                    },
                    error: function (error) {
                        console.log(error);
                    }
                });

 

可用情况下的Request Payload & Request Headers

 

若 contentType: "multipart/form-data" 红框中的上下不同处

 

 

最后，可用的代码：

 

html代码：

                    <form id="form" enctype="multipart/form-data" class="hide upload-file-form">
                        <input type="file" name="file" class="upload-file-input"/>
                    </form>

 

js部分

<script src="https://cdn.staticfile.org/zepto/1.2.0/zepto.min.js">

</script>
            var uploadFileInput = $(".upload-file-input");
            uploadFileInput.on("change", onChangeUploadFileInput);
            
            function onChangeUploadFileInput() {
                var formData = new FormData(document.getElementById('form'));

                var upload_token = "GhTVUnKD2qjh3fiu_UsDgfhG6v_UXhzB_mjpjeUc:1sdjrne1YJ4DCjIdtkL1FcgcOIc=:eyJzY29wZSI6InRrLXRrIiwiZGVhZGxpbmUiOjE0OTczNDk5OTB9";
                formData.append('key', 'zxcvzxxxzxcxxxxxcv.jpg');
                formData.append("token", upload_token);

                $.ajax({
                    url: "http://up-z2.qiniu.com/",
                    type: "POST",
                    data: formData,
                    dataType: 'json',
                    contentType: "multipart/form-data",
                    processData: false,
                    success: function (result) {
                        console.log(result);
                    },
                    error: function (error) {
                        console.log(error);
                    }
                });
            }
</script>