javascript 调用 window.URL.createObjectURL(fileObj) 时老说类型无效，代码如下

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 调用 window.URL.createObjectURL(fileObj) 时老说类型无效，代码如下相关的知识，希望对你有一定的参考价值。

<html>
<head>
<title>get file input full pathtitle</title>
<script language='javascript'>
function func()
var fileObj=document.getElementById("file");
window.URL.createObjectURL(fileObj.value);

</script>
</head>
<body>
<input type="file" onchange="func()" id="file" name="file"/>
</body>
</html>
错误信息如下：
[09:32:55.590] TypeError: argument 0 is not valid for any of the 1-argument overloads @ file:///C:/Users/lenovo/Desktop/test.html:7
我写这段代码的目的是获取被上传的文件的完整路径

function func()
    var fileObj=document.getElementById("file");
    // 注意这里
    // fileObj.files[0];
    var src = window.URL.createObjectURL(fileObj.files[0]);
    var img = document.createElement('img');
    img.src = src;
    document.body.appendChild(img);

 参考技术A js是无法获取file 控件的值的，你要获取的话可以通过后台程序语言用json或者xml之类的格式来返回被上传的文件路径。

浏览器 本地预览图片 window.url.createobjecturl

第一种方式
  1. <script type="text/javascript">   
  2. function setImagePreview() {   
  3. var docObj = document.getElementById("ctl00_ContentMain_file_head");   
  4. var fileName = docObj.value;   
  5. if (!fileName.match(/.jpg|.gif|.png|.bmp/i)) {   
  6. alert(‘您上传的图片格式不正确，请重新选择！‘);   
  7. return false;   
  8. }   
  9.   
  10. var imgObjPreview = document.getElementById("preview");   
  11. if (docObj.files && docObj.files[0]) {   
  12. //火狐下，直接设img属性   
  13. imgObjPreview.style.display = ‘block‘;   
  14. imgObjPreview.style.width = ‘63px‘;   
  15. imgObjPreview.style.height = ‘63px‘;   
  16. //imgObjPreview.src = docObj.files[0].getAsDataURL();   
  17. if (window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1) {   
  18. imgObjPreview.src = window.webkitURL.createObjectURL(docObj.files[0]);   
  19. }   
  20. else {   
  21. imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);   
  22. }   
  23. } else {   
  24. //IE下，使用滤镜   
  25. docObj.select();   
  26. docObj.blur();   
  27. var imgSrc = document.selection.createRange().text;   
  28. var localImagId = document.getElementById("localImag");   
  29. //必须设置初始大小   
  30. localImagId.style.width = "63px";   
  31. localImagId.style.height = "63px";   
  32. //图片异常的捕捉，防止用户修改后缀来伪造图片   
  33. try {   
  34. localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";   
  35. localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;   
  36. } catch (e) {   
  37. alert("您上传的图片格式不正确，请重新选择！");   
  38. return false;   
  39. }   
  40. imgObjPreview.style.display = ‘none‘;   
  41. document.selection.empty();   
  42. }   
  43. return true;   
  44. }   
  45.   
  46. </script>


<div id="localImag"><img id="preview" width="-1" height="-1" style="display:none" /></div> 
<asp:FileUpload ID="file_head" runat="server" onchange="javascript:setImagePreview();" /> 


第二种方式


  1. function setImagePreview(a,b) {
  2.     var url =‘‘;
  3.     if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
  4.         url = document.getElementById(a).value;
  5.     } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
  6.         url = window.URL.createObjectURL(document.getElementById(a).files.item(0));
  7.     } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
  8.         url = window.URL.createObjectURL(document.getElementById(a).files.item(0));
  9.     }
  10.     var imgPre = document.getElementById(b);
  11.     imgPre.src = url;
  12. }

a = fileid
b=imgid



以上是关于javascript 调用 window.URL.createObjectURL(fileObj) 时老说类型无效，代码如下的主要内容，如果未能解决你的问题，请参考以下文章

浏览器 本地预览图片 window.url.createobjecturl

Javascript - 链多个获取承诺

将图片地址转为blob格式的例子

js图片前端预览之 filereader 和 window.URL.createObjectURL

前端实现调用后台接口下载，arraybuffer和blob

JS获取图片（选择图片并显示）