javascript上传图片并预览

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
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭