使用Html5实现异步上传文件,支持跨域,带有上传进度条

2020-04-21 22:59:40易采站长站整理

服务器准备IIS

需要设置IIS里面的HTTP响应标头,如图添加如下设置,添加这项“Access-Control-Allow-Origin”,只有添加了这行才能支持跨域,不然像Chrome浏览器会报错

页面代码:

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="content-type" content="text/html;charset=utf-8">  
    <meta name="format-detection" content="telephone=no">  
    <meta name="msapplication-tap-highlight" content="no">  
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">  
    <title>Html5上传文件</title>  
</head>  
<body>  
    <div class="app">  
        <h1>Html5上传文件测试,带进度条</h1>  
        <div>  
            <input type="file" value="" id="fileInput" name="files" onchange="fileSelected()" />  
            <div style="margin:30px;">  
                <input type="button" value="上传" onclick="uploadFile()" />  
            </div>  
            <div style="margin:30px;">  
                <div id="fileName"></div>  
                <div id="fileSize"></div>  
                <div id="fileType"></div>