美文网首页web前端
H5 移动端Input File 文件上传以及后端接收

H5 移动端Input File 文件上传以及后端接收

作者: 嘘_187d | 来源:发表于2017-04-26 21:25 被阅读3913次

    前端部分

    前端部分主要用ajax 上传Base64字符串码

    $("#fileInput").live("change", function() {
                        var path = $(this).val();
                        var showfilename = $(this).parent().parent().prev(); //展示文件名称的view
                        showfilename.show(); //显示展示名称
                        showfilename.text(this.files[0].name);
                        var reader = new FileReader();
                        reader.readAsDataURL(this.files[0]);
                        reader.onload = function(e) {
                            console.log(e.target.result)
                            mui.ajax(http + _data.upload2, {
                                data: {
                                    file: e.target.result,
                                    fileModuleName: "saler",
                                },
                                dataType: 'json', //服务器返回json格式数据
                                type: 'post', //HTTP请求类型
                                timeout: timeOut,
                                success: function(data) {
                                     //获取返回的上传成功的数据
                                },
                                error: function(xhr, type, errorThrown) {
                                    //异常处理;
                                    
                                }
                            });
                        };
                    });
    

    后端部分

    后端部分获取Base64之后解析出来,根据不同的格式进行再构造,并传给前端,主要的是格式问题,故格式整合如下(图片类型不变,变得是其他文件类型)
    word doc后缀,type为msword


    doc.jpg

    以此类推
    word后缀docx---tyoe为 vnd.openxmlformats-officedocument.wordprocessingml.document

    excel后缀xls---vnd-ms-excel
    excel后缀xlsx----vnd.openxmlformats-officedocument.spreadsheetml.sheet

    pdf后缀 pdf----pdf

    txt后缀 ---text/plain
    ppt后缀----vnd.openxmlformats-officedocument.presentationml.presentation

    相关文章

      网友评论

        本文标题:H5 移动端Input File 文件上传以及后端接收

        本文链接:https://www.haomeiwen.com/subject/gmjizttx.html