手机端附件上传(FileReader / formData )

..

<input id="uploaderInput" class="input" type="file" accept="application/pdf" multiple="">

 

..

//-------------------------------------------------------
var FU_TIMEOUT = 30*1000;  // //ajax超时

//将base64转换为文件
function URL_TO_FILE(dataurl, filename) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type:mime});
}

$(function() {
    var $uploaderInput = $("#uploaderInput");
    
    // 允许上传的图片类型
    var allowTypes = ['application/pdf'];
    var maxSize = 1024 * 1024 * 5; // 10240KB,也就是 10MB 
    
    $uploaderInput.on("change", function(e) {
        console.log(e);
        var files = e.target.files;
        // 如果没有选中文件,直接返回
        if (files.length === 0) {
            return;
        }
        for (var i = 0, len = files.length; i < len; ++i) {
            var file = files[i];
            var fileType = file.type;
            // 如果类型不在允许的类型范围内
            if (allowTypes.indexOf(file.type) === -1) { 
                $.toast('该类型不允许上传' + fileType, "forbidden");
                continue;
            }else{
                fileType = "pdf";
            }

            if (file.size > maxSize) {
                $.toast("附件太大,不允许上传", "forbidden");
                continue;
            }
            
            const reader = new FileReader();//文件读取器
            reader.readAsDataURL(file);//获取文件URL,结果存至
             // readAsArrayBuffer(file): void 异步按字节读取文件内容,结果用ArrayBuffer对象表示
            // readAsBinaryString(file): void 异步按字节读取文件内容,结果为文件的二进制串
            // readAsDataURL(file): void 异步读取文件内容,结果用data: url的字符串形式表示
            // readAsText(file, encoding): void 异步按字符读取文件内容,结果用字符串形式表示
            
            reader.onload = function(event) { //.onload 但fr执行完之后 执行匿名函数
                /*event.target.nodeName   //获取事件触发元素标签名(li,p,div,img,button…)
                event.target.id      //获取事件触发元素id
                event.target.className  //获取事件触发元素classname
                event.target.innerHTML  //获取事件触发元素的内容(li)*/
                //console.log(event);
                const data = event.target.result;  // data:application/pdf;base64
                //console.log(data)
                
                //var fileObj = URL_TO_FILE(data,file.name);
                //console.log(fileObj)
                var formData = new FormData();
                formData.append("file_stream_id",FILE_STREAM_ID);//业务id
                formData.append("code","pdf");//附件所属业务类型
                formData.append('file', file);//文件
                formData.append('data', data);//base64
                
                $.ajax({
                    url: 'http://localhost:9050/xxx.do',
                    type: 'POST',
                    cache: false,
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType:'json',
                    timeout : FU_TIMEOUT,
                }).done(function(Obj) { 
                    console.log(Obj)
                    $.alert(Obj);
                    
                    
                }).fail(function(res){});
                
                
            }
        }
        
    });
    
});

 

posted @ 2022-12-02 16:45  SilentKiller  阅读(207)  评论(0)    收藏  举报