上传下载文件

Posted 2021-01-23 wwt2026

上传下载文件

上传：

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);