javascript上传图片并预览

原创 2018年04月16日 13:58:04

javascript文件:

function getImgUrl(node) { 

   
var fobj = node.files;

for(var i=0;i<fobj.length;i++){
var fname = fobj[i].name;
var fileType = fname.substr(fname.lastIndexOf('.')+1);
if(fileType == 'jpg' || fileType == 'jpeg' || fileType == 'png' || fileType == 'gif'){
if(node.files.length>9){
    alert('最多支持9张图片');
    return false;
    }
}else if(fileType == 'mpg' || fileType == 'm4v' || fileType == 'mp4' || fileType == 'flv' || fileType == '3gp' || fileType == 'mov' || fileType == 'avi' || fileType == 'rmvb' || fileType == 'mkv' || fileType == 'wmv'){
if(node.files.length>1){
    alert('最多支持一个视频');
    return false;
    }
}else{
alert('无效的文件');
return false;
}
}
    var imgURL = ""; 
    
    for(var i=0;i<node.files.length;i++){
    try{     
        var file = null;  
        if(node.files && node.files[0] ){ 
       
        file = node.files[i];  
        }else if(node.files && node.files.item(0)) {                                  
            file = node.files.item(i);     
        }     
        //Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径  
        try{  
            //Firefox7.0   
            imgURL =  file.getAsDataURL();    
            //alert("//Firefox7.0"+imgRUL);                           
        }catch(e){  
            //Firefox8.0以上                                
            imgRUL = window.URL.createObjectURL(file);  
            //alert("//Firefox8.0以上"+imgRUL);  
        }  
       
     }catch(e){      //这里不知道怎么处理了,如果是遨游的话会报这个异常                   
        //支持html5的浏览器,比如高版本的firefox、chrome、ie10  
        if (node.files && node.files[0]) {                            
            var reader = new FileReader();   
            reader.onload = function (e) {                                        
                imgURL = e.target.result;    
            };  
            reader.readAsDataURL(node.files[i]);   
        }    
     }
    if(fileType == 'jpg' || fileType == 'jpeg' || fileType == 'png' || fileType == 'gif'){
    creatImg(imgRUL);  
    }else{
    createVideo(file);
    }
     } 

}  


function creatImg(imgRUL){

var textHtml = '';
textHtml = "<img src='"+imgRUL+"' height='50' width='50' style='border:1px solid black;margin-left:5px;margin-top:5px;margin-bottom:5px;' onmouseenter='enterImg(this);'/>";
    $('#dfile').css('border','1px solid #000');
    $('#dfile').append(textHtml);  

}


function createVideo(file){

var formData = new FormData();
formData.append('file',file);
$.ajax({
url:'guide/addVideo.do',
data:formData,
type:'POST',
async:false,
cache:false,
contentType:false,
processData:false,
success:function(data){
var textHtml = '';
textHtml = "<video src='../../../imgages/pic/'+file.name  controls='controls' style='margin-left:5px;margin-top:5px;margin-bottom:5px;'></video>";
    $('#dfile').css('border','1px solid #000');
    $('#dfile').append(textHtml);  
},error:function(){

alert('视频上传失败');
}

});


}

html 文件:

<div id="file" style="display:none;">
<form action="javascript:void(0);" method="post" enctype="multipart/form-data">
<span style="font-size: 16px;">文件:</span>
<input type="file" name="file" id="picorvideo" style="width:180px;height:28px;" multiple onchange="getImgUrl(this);"/><br/>
</form>
<div id="dfile" style="margin-top: 20px;margin-bottom: 20px;"></div>

</div>

java后台:

public void addPC(@RequestParam("file") MultipartFile[] file,HttpServletRequest request,HttpServletResponse response) {
try {

ResourceBundle bundle = ResourceBundle.getBundle("config/properties/params");
String tomcatPath = bundle.getString("tomcatpath");
StringBuffer sb = new StringBuffer();
for (MultipartFile multipartFile : file) {
String originalFilename = multipartFile.getOriginalFilename();

File files = new File(tomcatPath+"network3/pages/images/pic/"+originalFilename);
multipartFile.transferTo(files);
sb.append(files.getAbsolutePath()).append("$");

}

}

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/rhy0619/article/details/79959682

用javascript实现图片上传并预览

最近在开发的过程中遇到了一个图片上传并预览的问题。其实这问题不难。chrome,FF,IE10+可以用FileReader来实现。IE9-可以用css的滤镜来实现。一开始我也是这样干了。但是测试的时候...
  • baidu_24024601
  • baidu_24024601
  • 2016-04-28 17:34:58
  • 7559

JavaScript实现图片上传并预览并提交ajax(完整demo)

图片上传并预览HTML
  • x550392236
  • x550392236
  • 2017-08-04 17:36:28
  • 7366

javascript实现图片上传以及预览(包含相关知识点汇总)

前言前端工作过程中有这么一个基本需求,要求将图片从本地选择上传到服务器,同时在本地进行预览。 这对于我这只小菜鸟来说也是难啊,为了预防写完了就忘,以及知识太过杂乱而不系统,在这里重新整理一下。正文预...
  • HeliumLau
  • HeliumLau
  • 2017-04-18 14:16:25
  • 1104

js实现图片文件上传预览 | 黄乔国PHP

普通的上传图片选择图片后并不知道自己选择的什么图片,那么通过js我们可以做出预览效果这样就知道选择的什么图片,以免误上传! js上传图片--预览图片 ...
  • miraclehw
  • miraclehw
  • 2017-09-07 22:37:34
  • 582

PHP上传图片带预览功能

  • 2014年03月27日 14:56
  • 3KB
  • 下载

springmvc-带预览的异步上传图片功能

springmvc配合小插件 上传有缩略图 的图片等文件
  • nich002
  • nich002
  • 2015-07-29 15:51:04
  • 5187

c#mvc文件图片预览批量上传

  • 2015年10月22日 11:40
  • 22.67MB
  • 下载

html5图片上传与预览实现

最近做项目需要用到图片上传与预览功能,由于是用于手机端,所以研究了下H5的实现方式。图片预览首先,解决图片预览问题。在html5中,提供了FileReader来读取本地文件,使我们可以实现图片预览功能...
  • a4307515
  • a4307515
  • 2016-01-12 16:38:53
  • 38808

html5预览并上传图片的功能

如何使用html5 fileReader来上传图片呢?
  • shi_yi_fei
  • shi_yi_fei
  • 2017-07-28 19:38:19
  • 1132

SSH整合+Extjs模拟上传图片并实现预览

原本以为 提交图片时,预览图片,只需要通过DOM操作,修改 的链接为本地文件路径就可以了。 可是经过测试,除了IE6以外,这种方法并不可行,各个浏览器为了安全问题,都把文件的真是路径隐藏了。 ...
  • iamwangch
  • iamwangch
  • 2012-10-15 21:14:34
  • 2248
收藏助手
不良信息举报
您举报文章:javascript上传图片并预览
举报原因:
原因补充:

(最多只允许输入30个字)