Determine the type of file upload

Upload is not the picture JS code

function test () {var FilePath = $ ("#image"). Val (); if ("" "! = FilePath) {var fileType = Getfiletype (FilePath);//console.log ( FileType);//Determine if the uploaded attachment is a picture  if ("jpg"! = FileType && "JPEG"! = FileType  && "png"! = FileType) {$ ("# Image "). Val (" "); alert (" Please upload images in jpg,jpeg,png format ");} else {//Get attachment size (in KB)  var fileSize = document.getElementById ("image"). Files[0].size/1024;if (FileSize > 2048) { Alert ("Image size cannot exceed 2MB");}}} function Getfiletype (filePath) {var startIndex = Filepath.lastindexof ("."); if (startIndex! =-1) return filepath.substring (StartIndex + 1, filepath.length). toLowerCase (); else return "";}

Html:

<input type= "file" name= "image" id= "image" accept= "image/x-png" onchange= "Test ()"/>

　　

1, the input attribute value has the following several more commonly used:

Accept: Represents the file MIME type that can be selected, multiple MIME types are separated by commas, and the commonly used MIME types are shown in the following table.

Multiple: Whether multiple files can be selected, the value of which is the virtual path of the first file when multiple files.

2. Accept

<input id= "fileId1" type= "file" accept= "image/png,image/gif" name= "file"/> test bad use?? Multiple attributes not allowed?

3, multiple

Multiple file uploads

<input id= "fileId2" type= "file" multiple= "multiple" name= "file"/>

4. Common MIME Types

Suffix name Mime name *.3gpp audio/3gpp, video/3gpp*.ac3 audio/ac3*.asf allpication/vnd.ms-asf*.au audio/b    Asic*.css text/css*.csv text/csv*.doc application/msword *.dot Application/msword *.dtd     Application/xml-dtd *.dwg image/vnd.dwg *.dxf image/vnd.dxf*.gif image/gif *.htm text/html *.html text/html *.jp2 image/jp2 *.jpe image/jpeg*.jpeg image/jpeg*.jpg image/jp    Eg *.js Text/javascript, application/javascript *.json application/json *.mp2 audio/mpeg, Video/mpeg *.mp3 audio/mpeg *.mp4 audio/mp4, video/mp4 *.mpeg video/mpeg *.mpg video/mpeg *.mpp Applica Tion/vnd.ms-project *.ogg Application/ogg, Audio/ogg *.pdf application/pdf *.png image/png *.pot A            Pplication/vnd.ms-powerpoint *.pps application/vnd.ms-powerpoint *.ppt application/vnd.ms-powerpoint *.rtf Application/rTF, text/rtf *.svf image/vnd.svf *.tif image/tiff *.tiff image/tiff *.txt te    Xt/plain *.wdb application/vnd.ms-works *.wps application/vnd.ms-works *.xhtml application/xhtml+xml *.XLC application/vnd.ms-excel *.xlm application/vnd.ms-excel *.xls application/vnd.ms-excel *.            XLT application/vnd.ms-excel *.xlw application/vnd.ms-excel *.xml text/xml, Application/xml *.zip Aplication/zip *.xlsx Application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

　　

CSS Input[type=file] style beautification, input upload button beautify HTTP://WWW.HAOROOMS.COM/POST/CSS_INPUT_UPLOADMH

Third, Ajax upload files

Ajax upload, you need to get Input:file selected files (possibly multiple files), get its file list is://input tag of the Files property document.queryselector ("#fileId"). files// Returns a list of files obtained from a list of files, and then iterates through the form data. That is://Get Upload file dom object var ofiles = Document.queryselector ("#fileId");//Instantiate a form data object var formData = new FormData ();//traverse the picture file list, Insert into form data for (var i = 0, file; file = Ofiles[i]; i++) {//File name, file Object Formdata.append (file.name, files);} Once you get the form data, you can upload it using Ajax post. Instantiate an Ajax object var xhr = new XMLHttpRequest (); xhr.onload = function () {alert ("Upload succeeded! ");}        Xhr.open ("POST", "upload.php", true);//Send form data xhr.send (formData); After uploading to the server, get to the file list: Array ([jpg_jpg] = array            ([name] = jpg.jpg [Type] = Image/jpeg [Tmp_name] = D:\xampp\tmp\phpA595.tmp [ERROR] = 0 [size] = 133363) [Png_png] = = Array ([name] =&G T            png.png [Type] = Image/png [Tmp_name] = D:\xampp\tmp\phpA5A6.tmp [ERROR] = 0 [Size] = 1214628) You can upload a file by looping through the array on the server. 

　　

Determine the type of file upload