javascript

file 转 url

Posted by 姚飞亮 on 2019-06-23

file 转 url

理解

  1. 准确说是 file to blob:url
  2. blob:url 是本地指向文件的url地址，如同变量名。
  3. 可以便于本地src指向试用，服某种业务逻辑时，信息传输时，不需要传具体的文件，只需要传blob:url（当名字）代替，实际文件不会来回传输还是在本地。
  4. 如果要上传还是得通过file文件上传。
  5. blob:url只在本地起作用，不能在服务器生成
1
2
<input type="file" id="files" multiple="multiple" accept="image/png,image/jpeg,"
    onchange="fileImport();">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var arr_Url_keyvalue = [];
function getObjectURL(file) {
     var url = null;
     if (window.createObjcectURL != undefined) {
       url = window.createOjcectURL(file);
     } else if (window.URL != undefined) {
       url = window.URL.createObjectURL(file);
     } else if (window.webkitURL != undefined) {
       url = window.webkitURL.createObjectURL(file);
     }
     let urlkeyvlueitem = { url: url, file: file }
     arr_Url_keyvalue.push(urlkeyvlueitem);
     return url;
   }
1
2
3
4
5
6
7
function fileImport() {
 var arr_files = document.getElementById('files').files;
 for (let i = 0; i < arr_files.length; i++) {
   var objURL = getObjectURL(arr_files[i]);//这里的objURL就是input file的真实路径
   console.dir(objURL)
 }
}

Ω
FEATURED TAGS
javascript
FRIENDS