码迷,mamicode.com
首页 > Web开发 > 详细

实践(1):简单的文件上传

时间:2019-06-04 13:04:39      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:pptx   mda   error   ssd   ext   template   lse   post   tip   

文件上传

html、修改

<div class="template-upload">
<span>模版样式:</span>
<button type="button" class="choose" id="btn">选择模板</button>
<input type="file" accept=".pptx,.pptx"  name="file" style="display: none" id="files" multiple="multiple">
<button id="upload" class="choose">上传模板文件</button>
<label  id="filename" class="filename" for=""></label>                    
</div>

技术图片

js代码
ajax
type,
data,
success....

//文件点击选择文件模板
        $("#btn").click(function(){
            $("#files").click();
        });
        //文件显示已选择文件名
        $("#files").change(function(){
            var filetmpname = $("#files").val();
            filename = filetmpname.split("\\").pop();
            $("#filename").text("已选择: "+filename);
        });
        //文件点击上传
        $("#upload").click(function () {
            var formdata = new FormData();
            formdata.append("file", $('#files')[0].files[0]);
            $.ajax({
                type: "post",
                url: "/template",
                data: formdata,
                contentType: false,
                processData: false,
                dataType: "json",
                eads : {'content-type' : 'application/x-www-form-urlencoded'},
                success: function (data) {
                    if(data.code==0){
                        alert(data.message)
                        //在上传模版的同时,请求后台获取模版ID
                        //setTimeout(getTemplate_name//(filename),10000);
                    }
                    else{
                        alert(data.errmsg);
                    }
                },
                error: function () {
                    alert("模板上传失败!");
                }
            });
        });

技术图片
技术图片

实践(1):简单的文件上传

标签:pptx   mda   error   ssd   ext   template   lse   post   tip   

原文地址:https://www.cnblogs.com/shapaozi/p/10972760.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!