input[type=file] 异步上传文件

背景

UI如图所示,其中有一个照相图标,点击后要挑选照相或许从相册中挑选要上传的图片。
《input[type=file] 异步上传文件》

照相上传部份的代码以下

html部份

<div class="take-photo">
    <img src="./images/take-photo.png" class="take-phote-picture">
    <input type="file" name="file" accept="images/*" class="select-picture">
</div>

css部份

.take-phote-picture{
    margin: 10px 20px;
    width: 100px;
}

.select-picture{
    opacity: 0;
    position: absolute;
    width: 100px;
    height: 100px;
    top: 10px;
    left: 70px;
    border-radius: 50px;
}

设想思绪

将一个input[type="file"]的透明度设置为0,悬浮在img标签之上。经由过程给input标签绑定change事宜,猎取上传的文件,异步上传。

题目

经由过程ajaxdata属性提交到背景的数据必需是键值对(key-value)的情势,其中值value不能为二进制数据。而经由过程inputfiles属性猎取的上传文件被花样化为二进制情势。

解决方案

define([], function () {
    /**
     * 跨域异步post提交东西 运用Formdata,非iframe 提交
     */

    var ifajax = function(_url){
        var data = new FormData();
        var obj ={};

        obj.appendInput = function (input_obj) {
            if (input_obj.files) {
                for (var i = 0; i < input_obj.files.length; i++) {
                    data.append(input_obj.name, input_obj.files[i]);
                }
            } else {
                data.append(input_obj.name, input_obj.value);
            }
            return this;
        };

        obj.submit = function (success,err) {
            var xhr = new XMLHttpRequest();
            var url = _url||"/club/apiv1/me/b64-upload";

            xhr.open("POST", url, true);
            xhr.setRequestHeader('Accept', '*/*');
            xhr.onload = function () {
                if (xhr.status == 200) {
                    if (xhr.responseText) {
                        try {
                            //console.log(xhr);
                            var json = $.parseJSON($.trim(xhr.responseText));
                            success && success(json);
                        } catch (e) {
                            err && err("parse error", xhr.responseText);
                        }
                    }
                } else {
                    var message = xhr.responseText, code = xhr.status;
                    if (code === 413) {
                        message = "上传文件大小凌驾限定"
                    } else {
                        try {
                            var json = $.parseJSON(xhr.responseText);
                            message = json.message;
                            code = json.code;
                        } catch (e) {

                        }
                    }

                    err && err (code, message);
                }
            };
            xhr.send(data);
            return;
        }

        return obj;
    };

    return ifajax;
});

另外,还能够借助插件ajaxFileUpload完成异步上传文件

    原文作者:jack2wang
    原文地址: https://segmentfault.com/a/1190000009093971
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞