上传下载文件

上传下载文件

上传：

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‘// 使用iframevar 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‘;ifdocument.body.appendChild(iframe);

上传下载文件

原文地址：https://www.cnblogs.com/wwt2026/p/10039934.html