如何在javascript中獲取html輸入文件類型屬性？

Question

我想在javascript中捕獲上傳文件屬性數組。 這可以用javascript做嗎？

細節要求：我有html表單，由javascript函數提交，現在我想在該表單中再添加一個字段上傳文件 ，但是如何通過javascript函數將上傳文件數組發送到我的php腳本

$('#save').click(function(){        
    var filearray = new Array();
    var file = $("#file")[0].files[0];
    filearray["filename"] = file.name;
    filearray["filesize"] = file.size;
    filearray["fileType"] = file.type;
    filearray["fileTemp"] = file.tmp_name;
    filearray["fileError"] = file.error;
});

我沒有在javascript中獲取屬性tmp_name和錯誤 ，因為它生成文件在服務器上但我在客戶端這樣做。

Answer 1

文件屬性tmp_name和文件在服務器上時生成的錯誤

Answer 2

嘗試這樣的事情

var extension = new Array(".jpg",".jpeg",".JPEG",".JPG",".PNG",".png",".ico",".ICO",".GIF",".gif");

function CheckExtension(fieldvalue)
{
        var thisext = fieldvalue.substr(fieldvalue.lastIndexOf('.'));
    for(var i = 0; i < extension.length; i++) {
        if(thisext == extension[i]) { return true; }
        }

    return false;

}

將fieldvalue作為輸入文件值傳遞。

希望這可以幫到你..

Answer 3

獲取文件名和擴展名：

var extension = fileName.split('.').pop();
var name = fileName.split('.')[0];

獲取文件大小：

$('#youfiletextbox').bind('change', function() {
  var fileSize = this.files[0].size);
});

Answer 4

  <input type="file" class='img-icon' id="qImage" name="qImage1" accept="image/*" onchange="GetFileInfo('qImage')"/>  
function GetFileInfo(imageID) {
        var fileInput = document.getElementById(imageID);
        var fName;
        var fSize;
        var fType;

        var message = "";
        if ('files' in fileInput) {
            if (fileInput.files.length == 0) {
                alert("Please browse for one or more files.");
            } else {
                for (var i = 0; i < fileInput.files.length; i++) {
                    var file = fileInput.files[i];
                    if ('name' in file) {
                        fName = file.name;
                    }
                    else {
                        fName = file.fileName;
                    }
                    if ('size' in file) {
                        fSize = file.size;
                    }
                    else {
                        fSize = file.fileSize;
                    }
                    if ('type' in file) {
                        fType = file.type;
                    }
                    else {
                        fType = file.mediaType;
                    }
                }

                var extension = fName.split('.').pop();
                var size = fSize / 1024;

                if(extension == "png" || extension == "jpg" || extension == "svg"){
                    if(size > 5){
                        alert("Image size must be less than 5kb.");
                        document.getElementById(imageID).value = null;
                    }
                } else {
                    alert("Image type must png, jpg or svg and size must be less than 5kb.");
                    document.getElementById(imageID).value = null;
                } 


            }
        } 
        else {
            if (fileInput.value == "") {
                message += "Please browse for one or more files.";
                message += "<br />Use the Control or Shift key for multiple selection.";
            }
            else {
                message += "Your browser doesn't support the files property!";
                message += "<br />The path of the selected file: " + fileInput.value;
            }
            document.getElementById ("info").innerHTML = message;
        }
    }
<div id="info" style="margin-top:20px"></div>