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("$");
}
}