玩！ Framework 和 Uniformjs 不能很好地处理文件上传

发布于 2024-11-30 01:57:29 字数 1526 浏览 0 评论 0原文

我正在 Play! 中编写一个小型网络应用程序，并尝试使用 UniformJS (http://uniformjs.com/) 来让我的表单元素看起来不错。该应用程序的一页允许用户上传文件：

#{ form @Application.upload(), id:'uploadform', enctype:'multipart/form-data'}
<input type="file" id="uploadFile" name="uploadFile"/>
<input type="submit" id="surveyChooseFileButton" class="button" value="Upload" />
#{/form}

控制器如下所示：

public static void upload(@Required File uploadFile, @Required String surveyName) {
...
}

这就像 Play! 的其中一个一样。示例（http://www.playframework.org/documentation/1.0/5things#a5 .Straightforwardfileuploadmanagementa），一切正常。问题是当我将 Uniform 应用于文件输入时：

$(function(){ $("input:file").uniform(); });

现在控制器收到一个空文件对象！有什么办法解决这个问题吗？

更新：

删除 id 并不能做到这一点（尽管这看起来非常合理！）。查看违规元素的源代码显示：

<div id="uniform-uploadFile" class="uploader">  <!-- A new div -->
   <!-- My input element turns invisible --> 
   <input id="uploadFile" type="file" name="uploadFile" size="19" style="opacity: 0;">  

   <!-- Uniform adds these -->
   <span class="filename" style="-moz-user-select: none;">No file selected</span> 
   <span class="action" style="-moz-user-select: none;">Select</span>
</div>

仍然不知道发生了什么，但这就是最终结果。

原文

I am writing a small webapp in Play!, and trying to use UniformJS (http://uniformjs.com/) to make my form elements look good. One page of the app lets users upload a file:

#{ form @Application.upload(), id:'uploadform', enctype:'multipart/form-data'}
<input type="file" id="uploadFile" name="uploadFile"/>
<input type="submit" id="surveyChooseFileButton" class="button" value="Upload" />
#{/form}

The controller looks like this:

public static void upload(@Required File uploadFile, @Required String surveyName) {
...
}

This is all just like one of the Play! examples (http://www.playframework.org/documentation/1.0/5things#a5.Straightforwardfileuploadmanagementa), and that all works fine. The problem is when I apply Uniform to my file input:

$(function(){ $("input:file").uniform(); });

Now the controller receives a null File object! Is there any way around this?

UPDATE:

Removing the id's doesn't do it (although that seemed very plausible!). View-source on the offending element reveals:

<div id="uniform-uploadFile" class="uploader">  <!-- A new div -->
   <!-- My input element turns invisible --> 
   <input id="uploadFile" type="file" name="uploadFile" size="19" style="opacity: 0;">  

   <!-- Uniform adds these -->
   <span class="filename" style="-moz-user-select: none;">No file selected</span> 
   <span class="action" style="-moz-user-select: none;">Select</span>
</div>

Still no idea what's going on, but this is the end result.

分享到QQ

分享到微博