實踐(1):簡單的文件上傳

文件上傳

html、修改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....ajax

//文件點擊選擇文件模板
        $("#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("模板上傳失敗!");
                }
            });
        });


相關文章
相關標籤/搜索