Ajax上傳文件(包含文件的類型,大小驗證)

JS代碼塊:

<script>
    //  上傳文件
    $(function() {
        $("#button").click(function() {
                if ($("#website-title").val() == "") {
                    alert('文件名稱不能爲空!\r\n')
                    return false;
                }
                if ($("#id-input-file-2").val() == "") {
                    alert('請選擇上傳的文件!);
                    return false;
                }
                //判斷文件上傳類型
                var fileSize = 0;
                //文件類型
                var filetypes = [".jpg",".png",".rar",".txt",".zip",".doc",".ppt",".xls",".pdf",".docx",".xlsx"];
                var filepath = document.getElementById("id-input-file-2").value;
                var isnext = false;
                var fileend = filepath.substring(filepath                                   .lastIndexOf("."));
                if (filetypes && filetypes.length > 0) {
                    for (var i = 0; i < filetypes.length; i++) {
                        if (filetypes[i] == fileend) {
                            isnext = true;
                            break;
                        }
                    }
                }
                if (!isnext) {
                    alert('不接受此文件類型,請上傳zip格式的文件!\r\n');
                    return false;
                }

                //判斷上傳文件的大小
                fileSize = document.getElementById("id-input-file-2").files[0].size;
                var size = fileSize / 1024;
                var filemaxsize = 1024 * 2;//2M
                if (size > filemaxsize) {
                    alert('附件大小不能大於' + filemaxsize / 1024 +'M!\r\n', );
                    return false;
                }

                else {
                    var form = new FormData(document                                        .getElementById("tf"));
                    $.ajax({
                            url : "${pageContext.request.contextPath}/newdeploy.action",
                            timeout : 300000,
                            dataType : "json",
                            type : "post",
                            data : form,
                            processData : false,
                            contentType : false,
                            success : function(res) {
                                    if (res.code == 0) {
                                        alert("上傳成功!")
                                    } else {
                                            alert("上傳失敗!")                                              }

                            }
                    });
                }
        })
    });
</script>

jsp代碼塊:

<form id="tf">
<div>
    <input type="text" id="website-title" name="filename">
    <input type="file" id="id-input-file-2" name="file" />
    <button id="button" type="button">&nbsp;保存</button>
</div>
</form>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章