上傳下載檔案

上傳：

h5中input有個type屬性file，可以實現選擇檔案功能，accept屬性可以選擇顯示的檔案型別,預設單選，加個multiple屬性可以多選

使用document.querySelector獲取，獲取的檔案資訊是不可修改的，如下

// input原生樣式略醜，可以隱藏，用自定義節點觸發點選事件，
<input onchange="" style="display:none;" accept=".png，.jpg" type="file"id="file" >
<a href="javascript:document.querySelector('#file').click();">點選選擇檔案</a>
<img>    


// 獲取檔案資訊陣列的第一個檔案資訊
var input=document.querySelector('#file')；
var file=input.files[0];
 

可以做預讀取處理，比如選擇圖片後，本地可以獲取到檔案地址進行預覽

var url =URL.createObjectURL(file);
document.querySelector('img').src=url;

重複選擇同一檔案，由於選擇的檔案路徑沒變導致onchange沒有觸發，可以修改input的value值或者重新初始化HTML

input.value="";
input.outerHTML=input.outerHTML;

上傳檔案使用FormData處理，如果用jQuery的話需要設定processData和contentType為false

  var form = new FormData();
    form.append("file", file);

    xhr = new XMLHttpRequest();
    xhr.open("post", url, true);
    xhr.onload = function () {
        input.value = '';
        var r = JSON.parse(xhr.responseText)
    };
    xhr.send(form);
 

後臺接收

 var fileStream = Request.Files[0].InputStream;

下載：

// path為下載檔案地址就會下載
window.location.href='path'

// 使用iframe
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
var r = [];
for (var k in data) r.push(k + '=' + encodeURIComponent(data[k]));
iframe.src = 'getOilPrice2?' + r.join('&') + '&isexport=1';
if
document.body.appendChild(iframe);