plupload实现文件上传,有些文件后台获取的文件名是blob

梦幻女侠 发布于 2015/03/25 17:49
阅读 8K+
收藏 0

plupload文件上传,有些文件上传,后台获取的文件名是blob怎么回事,怎么解决呢

$(function() {
$("#uploader").pluploadQueue({
runtimes : 'html5,flash,silverlight,html4',
url : '${ctx}/upload.do?method=fileUploadAndJpg',
chunk_size : '1mb',
rename : true,
dragdrop : true,


filters : {
max_file_size : '100mb',
mime_types : [
{
title : "document files",
extensions : "doc,docx,xls,xlsx,ppt,pptx,pdf"
} ]
},


resize : {
width : 320,
height : 240,
quality : 90
},


flash_swf_url : '${ctx}/plupload/js/Moxie.swf',
silverlight_xap_url : '${ctx}/plupload/js/Moxie.xap'
});


});


<form method="post" action="dump.php">
<div id="uploader">
<p>Your browser doesn't have Flash, Silverlight or HTML5
support.</p>
</div>
</form>
页面中是这么使用的,为啥有些文件上传后台获取的文件名是blob,求解决方案

加载中
0
yunfound
yunfound

plupload默认的字段名称是file,而默认的文件名称filename 则是你文件原本名次,如果是通过ajax上传的,则上传的是一个Blob对象,此时filename就默认为blob了,你可以在beforupload事件时获取你原本的文件名称,然后修改:

function onUploaderBeforeUpload(up, file) {
	up.settings.multipart_params = {
		filename : file.name
	};
}



梦幻女侠
梦幻女侠
您好,改了,还是不行
0
梦幻女侠
梦幻女侠

其中function onUploaderBeforeUpload(up, file) {
   up.settings.multipart_params = {
       filename : file.name
   };
}就这么写的,怎么回事

0
yunfound
yunfound

引用来自“梦幻女侠”的评论

其中function onUploaderBeforeUpload(up, file) {
   up.settings.multipart_params = {
       filename : file.name
   };
}就这么写的,怎么回事

你这是贴的plupload的源码吧,源码中写了这个事件是 Internal event handlers

你如果是在外部则有两种方式,一种是初始化的时候写上去:

$("#uploader").pluploadQueue({
    ...
    init:{
        BeforeUpload: function(up, file) {
         up.settings.multipart_params = {
            filename : file.name
         };
  
        },
    }
    ...

})



另一种就是绑定事件了:

plInstance.bind('BeforeUpload',function(file){
    this.settings.multipart_params = {filename:file.name};
})




梦幻女侠
梦幻女侠
我用的是第一种还是不行,不知道哪里错了
0
梦幻女侠
梦幻女侠

引用来自“yunfound”的评论

引用来自“梦幻女侠”的评论

其中function onUploaderBeforeUpload(up, file) {
   up.settings.multipart_params = {
       filename : file.name
   };
}就这么写的,怎么回事

你这是贴的plupload的源码吧,源码中写了这个事件是 Internal event handlers

你如果是在外部则有两种方式,一种是初始化的时候写上去:

$("#uploader").pluploadQueue({
    ...
    init:{
        BeforeUpload: function(up, file) {
         up.settings.multipart_params = {
            filename : file.name
         };
  
        },
    }
    ...

})



另一种就是绑定事件了:

plInstance.bind('BeforeUpload',function(file){
    this.settings.multipart_params = {filename:file.name};
})




$(function() {
$("#uploader").pluploadQueue({
runtimes : 'html5,flash,silverlight,html4',
url : '${ctx}/upload.do?method=fileUploadAndJpg',
chunk_size : '1mb',
rename : true,
dragdrop : true,


filters : {
max_file_size : '100mb',
mime_types : [
{
title : "document files",
extensions : "doc,docx,xls,xlsx,ppt,pptx,pdf"
} ]
},


resize : {
width : 320,
height : 240,
quality : 90
},


flash_swf_url : '${ctx}/plupload/js/Moxie.swf',
silverlight_xap_url : '${ctx}/plupload/js/Moxie.xap',
init:{
       BeforeUpload: function(up, file) {
        up.settings.multipart_params = {
           filename : file.name
        };
  
       }
   }
});
});
我这样写的还是不行啊,怎么回事
梦幻女侠
梦幻女侠
回复 @yunfound : 我发在帖子中了,你看看
梦幻女侠
梦幻女侠
回复 @yunfound :
yunfound
yunfound
回复 @梦幻女侠 : 发你的html或者jsp给我看看
梦幻女侠
梦幻女侠
回复 @yunfound : 我用下面的方法,直接调用init没问题,但是就是前台没有那个上传界面
梦幻女侠
梦幻女侠
回复 @yunfound : 没有,后台输出文件名就是blob
下一页
0
梦幻女侠
梦幻女侠
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/commons/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>文档上传</title>
<!-- 首先需要引入plupload的源代码 -->
<script src="${ctx}/plupload/js/plupload.full.min.js"></script>
<link rel="stylesheet"
href="${ctx}/plupload/js/jquery.plupload.queue/css/jquery.plupload.queue.css"
type="text/css" media="screen" />
<link href="${ctx }/css/style.css" rel="stylesheet" type="text/css" />
<script src="${ctx}/plupload/js/jquery-1.11.1.min.js"></script>
<!-- production -->
<script type="text/javascript"
src="${ctx}/plupload/js/plupload.full.min.js"></script>
<script type="text/javascript"
src="${ctx}/plupload/js/jquery.plupload.queue/jquery.plupload.queue.js"></script>
<SCRIPT type="text/javascript">


/* function saveArticle(){
var uploader = $('#uploader').pluploadQueue();
if(uploader.files.length!=0){
if(uploader.total.failed>0){
alert("文件上传失败,文件格式有问题,请重新选择文件。");
return false;
}
if(uploader.total.uploaded<uploader.files.length){
alert("文件还没有上传完,请等待...");
return false;
}
}else{
alert("你必须至少上传一个文件");
return false;
}
//标题
var title=$("#trscaption_id");
//描述
var descr=$("#trsbreif_id");


if(title.val()==""){
alert("请输入标题");
title.focus();
return false;
}
if(descr.val()==""){
alert("请输入描述");
descr.focus();
return false;
}


return ;
} */
//-->
</SCRIPT>
</head>
<body style="font: 13px Verdana; background: #eee; color: #333">
<div>
<form method="post" action="dump.php">
<div id="uploader">
<p>Your browser doesn't have Flash, Silverlight or HTML5
support.</p>
</div>
</form>
<form method="post" action="article.do?method=articleSave"
onsubmit="return saveArticle(this)">
<input type="hidden" id="fileList_id" name="fileList"
value="${fileList }" />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="64" height="30" align="right">标题&nbsp;</td>
<td><input type="text" id="trscaption_id" name="trscaption"
class="text01" style=" width:400px;" /><font color=red>*</font></td>
</tr>
<tr>
<td height="30" align="right" style="vertical-align:top;">介绍&nbsp;</td>
<td><textarea name="trsbreif" id="trsbreif_id" class="text02"
style=" width:400px; height:120px"></textarea><font color=red>*</font></td>
</tr>
<tr>
<td height="30" align="right" valign="top">文献密级&nbsp;</td>
<td><select name="sec_id" id="secid" class="select">
<c:forEach var="sec" items="${requestScope.seclist}">
<option value=${sec.id}>${sec.name}</option>
</c:forEach>
</select><font color=red>*</font></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit"
class="button01" value="保存"></td>
</tr>
</table>
</form
<div class="spacer"></div>
</div>


<script type="text/javascript">
$(function() {
$("#uploader").pluploadQueue({
runtimes : 'html5,flash,silverlight,html4',
url : '${ctx}/upload.do?method=fileUploadAndJpg',
chunk_size : '1mb',
rename : true,
dragdrop : true,


filters : {
//max_file_size : '100mb',
mime_types : [
{
title : "document files",
extensions : "doc,docx,xls,xlsx,ppt,pptx,pdf"
} ]
},
flash_swf_url : '${ctx}/plupload/js/Moxie.swf',
silverlight_xap_url : '${ctx}/plupload/js/Moxie.xap',
init:{
                     BeforeUpload: function (up, file) {
                         up.settings.multipart_params = {
                         filename : file.name
                     };
                     }
   }
});
});

</script>
</body>
</html>
0
yunfound
yunfound

刚看了一下plupload的源码,发现这行:

var fd = new window.FormData();
data.each(function (value, name) {
	if (value instanceof Blob) {
		fd.append(name, value.getSource());
	} else {
		fd.append(name, value);
	}
});
data = fd;



也就是它压根就没有给上传的文件指定名称,不指定名称的话,大部分浏览器默认都是blob。

你可以修改这个点,然后重新 编译一份plupload代码:

if (data instanceof FormData) { // if still a FormData, e.g. not mangled by _prepareMultipart()
 var fd = new window.FormData(),filename;
 data.each(function (value, name) {
 if (value instanceof Blob) {
 fd.append(name, value.getSource(),filename);
 } else {
 name == 'filename' && (filename = value);
 fd.append(name, value);
 }
 });
 data = fd;
}
	

 

 

changqingx
changqingx
兄弟 你看到的版本是pupload的哪个版本。 我的用的2.12版本plupload.full.min.js与你这个源码不一样。。
InkYI
InkYI
厉害了,虽然不是这个插件,但是解决了我遇到上传blob格式文件名错误的问题
yy9103
yy9103
为什么我在dev.js里面没找到这段源码、、、
yunfound
yunfound
1年前的内容,居然还有人评论。。
921977939qqcom
921977939qqcom
这个回答真的超厉害的,帮了我大忙
0
h
hongbai

特意注册了个账号,来说下可能的原因。

你看下设置的参数里面,有一项:chunk_size : '1mb'

chunk_size参数的值改为服务器允许的最大上传文件大小,基本上就可以解决问题。

原因是:chunk_size参数用来设置块的大小,当文件的大小超过该值的时候,就会被拆成该值大小的块进行上传,而服务器的上传接口不支持续传的话,就会出现blob文件。

解决方法:

分两种,第一种就是把chunk_size参数设置成服务器允许的最大上传文件大小,这种方法治标不治本,不能越过服务器的限制上传大文件;第二种解决方法,就是修改上传接口,使其支持续传。

以上。

返回顶部
顶部