Shulou(Shulou.com)06/01 Report--

This article focuses on "how to use Html5 to upload files asynchronously". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn how to use Html5 to upload files asynchronously.

Server prepares IIS

You need to set the HTTP response header in IIS. Add the following setting as shown in the figure. Add this "Access-Control-Allow-Origin" item. Only by adding this line can cross-domain be supported, otherwise Chrome browsers will report an error.

Page code:

XML/HTML Code copies content to the clipboard

Html5 uploads files

Html5 upload file test, with progress bar

Function fileSelected () {

/ / reset status display

Document.getElementById ("msg") [xss_clean] = ""

Document.getElementById ('percentNumber') [xss_clean] =''

Document.getElementById ("progress"). Style.width = "0%"

Var file = document.getElementById ('fileInput'). Files [0]

If (file) {

Var fileSize = 0

If (file.size > 1024 * 1024)

FileSize = (Math.round (file.size * 100 / (1024 * 1024)) / 100). ToString () + 'MB'

Else

FileSize = (Math.round (file.size * 100 / 1024) / 100). ToString () + 'KB'

Document.getElementById ('fileName') [xss_clean] =' Name:'+ file.name

Document.getElementById ('fileSize') [xss_clean] =' Size:'+ fileSize

Document.getElementById ('fileType') [xss_clean] =' Type:'+ file.type

}

}

Function uploadFile () {

Var fd = new FormData ()

Fd.append ("fileInput", document.getElementById ('fileInput') .files [0])

Var xhr = new XMLHttpRequest ()

Xhr.upload.addEventListener ("progress", uploadProgress, false)

Xhr.addEventListener ("load", uploadComplete, false)

Xhr.addEventListener ("error", uploadFailed, false)

Xhr.addEventListener ("abort", uploadCanceled, false)

Xhr.open ("POST", "http://10.0.0.200:9001/Home/Upload");//" is changed to its own server interface address

/ / xhr.setRequestHeader ("Access-Control-Allow-Origin", "*"); / / you need to configure it in IIS to make cross-domain requests.

/ / xhr.setRequestHeader ("Content-Type", "multipart/form-data")

Xhr.send (fd)

}

Function uploadProgress (evt) {

If (evt.lengthComputable) {

Var percentComplete = Math.round (evt.loaded * 100 / evt.total)

Document.getElementById ('percentNumber') [xss_clean] = percentComplete +'%'

Var jindutiao = document.getElementById ("progress")

Jindutiao.style.width = percentComplete + "%"

}

Else {

Document.getElementById ('percentNumber') [xss_clean] =' schedule calculation is not supported'

}

}

Function uploadComplete (evt) {

/ / evt.target.responseText

Document.getElementById ("msg") [xss_clean] = "uploaded successfully"

}

Function uploadFailed (evt) {

Document.getElementById ("msg") [xss_clean] = "there was an error during upload"

}

Function uploadCanceled (evt) {

Document.getElementById ("msg") [xss_clean] = "the user cancelled the upload or the browser deleted the connection"

}

At this point, I believe you have a deeper understanding of "how to use Html5 to upload files asynchronously". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.