2019-10-24 mui 文件上传

HTML

    <div class="mui-card">
        <div class="mui-content-padded">
            <h5 style="font-size: 14px;">附&nbsp;&nbsp;&nbsp;&nbsp;件:<b style="color:red">(支持<=2Mb文件)</b></h5>
            <div style="margin-top:8px">
                <form id="uploadForm" enctype="multipart/form-data;charset=gbk">
                    <input type="hidden" name="hhid" id="hhid" />
                    <input id="files" type="file" name="files" style="width:220px" />
                    <button id="upload" class="cd-btn mui-btn mui-btn-blue mui-btn-outlined" type="button" onclick="uploadfile();">上  传</button>
                </form>
            </div>
        </div>
    </div>

    <div class="mui-card">
        <div class="mui-content-padded">
            <h5 style="font-size: 14px;">已上传列表:</h5>
            <ul id='fileslist' class="mui-table-view">
            </ul>

        </div>
    </div>

JS

        function uploadfile() {
            var formdata = new FormData($('#uploadForm')[0]);
            var age = formdata.get("files");
            //alert(age.value);
            var nwaiting = plus.nativeUI.showWaiting();
            $.ajax({
                url: "https://tlm.asstar.net:37002/pl-xxwl/xxwlService/uploadXxwlFile",
                type: 'POST',
                cache: false,
                data: formdata,
                processData: false,
                contentType: false
            }).done(function(res) {
                nwaiting.close();
                console.log(JSON.stringify(res));
                var result = JSON.parse(res.data);
                if(result.code) {
                    upfilepaths += result.filepath + ":@";
                    upfilesizes += result.filesize + ":@";
                    upfilesnames += result.filename + ":@";
                    $("#fileslist").append(
                        "<li  filesize=\"" + result.filesize + "\" >" +
                        result.filename +
                        "</li>"
                    );
                } else {
                    nwaiting.close();
                    mui.alert(result.msg);
                }

            }).fail(function(res) {

            });
        }
实际效果
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容