上传图片预览

最新推荐文章于 2020-12-29 13:23:45 发布

KingBoxing

最新推荐文章于 2020-12-29 13:23:45 发布

阅读量843

点赞数

文章标签： myeclipse file 浏览器 function input url

本文链接：https://blog.csdn.net/aaa1117a8w5s6d/article/details/7279839

版权

这几天一直在做一个功能：就是上传多张图片到服务器并且支持上传前预览功能。

现在的思路有两种，一种是用<input type="file" multiple>来做，但是multiple这个属性在IE浏览器里不支持！

而且在取得input里的value值后在IE和火狐、谷歌里显示的不一样，在IE里弹出的是文件的完整路径如：C:\Documents and Settings\Administrator\桌面\新建文件夹\share.jpg

在火狐和谷歌浏览器里只能得到文件的名字share.jpg而得不到路径。后再在网上查到通过

function readFileFirefox(fileBrowser) {
    netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
    var fileName=fileBrowser.value; 
    var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
        file.initWithPath( fileName.replace(/\//g, "\\\\") );
   return file.path;
}


function getValue(){
  var file_url = readFileFirefox(document.getElementById("update_image"));
  alert(file_url);
  document.getElementById("showimg").src=file_url;
}

上面这个方法可以在火狐下得到完整路径，但是还是无法实现预览功能，因为在火狐浏览器里要像正确显示<img>标签，它的src属性值应该是：

file:///F|/Workspaces/MyEclipse 9/resirectJSP/WebRoot/01.jpg而不是F:\Workspaces\MyEclipse 9\resirectJSP\WebRoot\01.jpg

所以现在只能用第二种方法，就是用flash上传，有个工具是swfupload，但是我不太会用啊，哪位大虾可以教一下不，非常感激！