首页 > 其他分享 >手机端附件上传(FileReader / formData )

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

时间:2022-12-02 16:58:38浏览次数:38  
标签:target FileReader formData data file var 上传 event

..

<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){});
                
                
            }
        }
        
    });
    
});

 

标签:target,FileReader,formData,data,file,var,上传,event
From: https://www.cnblogs.com/mysterious-killer/p/16944925.html

相关文章

  • 使用node上传文件到文件夹
    1、安装multer和path:npminstallmultermulter-sOryarnaddmultermulter-s2、新建upload.js://1.引入constexpress=require('express');constmulter......
  • c#文件分片上传,断点续传
    ​ HTML部分 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="up6.index" %><!DOCTYPE html PUBLIC "-//W3C//DTDXH......
  • 苹果App Store上传应用流程详解
    在向AppStore提交应用之前,开发者首先要成为苹果iOS开发者项目的成员,每年向苹果缴纳99美元或199美元的费用(具体申请方法后期更新)。其次创建相应的证书Development是开发环境......
  • spring boot使用阿里云分片上传讲解示例
    阿里云分片上传importcom.aliyun.oss.ClientException;importcom.aliyun.oss.OSS;importcom.aliyun.oss.OSSClientBuilder;importcom.aliyun.oss.OSSException;im......
  • 苹果App Store上传应用流程详解
    在向AppStore提交应用之前,开发者首先要成为苹果iOS开发者项目的成员,每年向苹果缴纳99美元或199美元的费用(具体申请方法后期更新)。其次创建相应的证书Development是开发环......
  • .net文件分片上传,断点续传
    ​IE的自带下载功能中没有断点续传功能,要实现断点续传功能,需要用到HTTP协议中鲜为人知的几个响应头和请求头。 一. 两个必要响应头Accept-Ranges、ETag      ......
  • asp.net文件分片上传,断点续传
    ​ 以ASP.NETCoreWebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API,包括文件的上传和下载。 准备文件上传的API #region 文件上传......
  • 通过js创建input标签上传文件自动化调研总结
    通过js创建input标签上传文件自动化调研总结:1、原因:前端通过js添加的input,当前没有后面两行,所以没有添加到dom树,无法通过ChooseFile自动化2、跨平台解决方案:添加后面两......
  • 使用cnblog上传markdown文件到博客园
    下载并且安装python3地址:https://www.python.org/安装完以后:下载pycnblog地址:https://github.com/dongfanger/pycnblo将下载的pycnblog工具解压,打开config.yaml......
  • Springboot+freemaker+eureka+fegin实现多文件上传,完整demo
    可能一般用fegin实现文件上传的不多,但这也算是一个文件上传方式吧,如果用到了,可以考虑借鉴一下,直接上代码好了eurekapom.xml<?xmlversion="1.0"encoding="UTF-8"?><......