0

有人可以告诉我在 kendoui 中上传文件的运行示例吗?

因为我试图上传文件并将其上传到视图页面但是当我点击保存按钮时我在显示页面中找不到该文件。我在互联网上搜索它然后我发现了一些服务器问题。所以有人请告诉我在我的情况下如何使用服务器。我正在做一个 grails 项目

我用过的代码:--

<tr class="prop">
 <td valign="top" class="name">
 <label>File Upload</label>
  <input name="photos[]" id="photos" type="file" /><script>$(document).ready(function ()$("#photos").kendoUpload({

  autoUpload:true,
  upload: onUpload,
  error: onError

   });
       function onError(e) {
                   // Array with information about the uploaded files
         var files = e.files;

            if (e.operation == "upload") {
              alert("Failed to uploaded " + files.length + " files");
                                        }

         // Suppress the default error message
                  e.preventDefault();
                 },
             function onUpload(e) {
               var files = e.files;
      if (e.operation == "upload") {
          alert("Successfully uploaded " + files.length + " files");
                   }
          });</script>
                    </td>
              </tr>

我正在添加视图文件:- create.gsp

<%@ page import="ten.SkeletonBill"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="layout" content="billing" />
<get var="entityName"
value="${message(code: 'skeletonBill.label', default: 'SkeletonBill')}" />
<title><g:message code="default.create.label"
args="[entityName]" /></title>
<script src="source/kendo.all.js"></script>
<link href="styles/kendo.common.css" rel="stylesheet" />
<link href="styles/kendo.default.css" rel="stylesheet" />

</head>
<body>
<content tag="menu-function">
<li><span class="k-link"><a href="#"
onclick="SkeletonBillForm.submit();return false;"><i
class="icon-plus-sign"></i>
<g:message code="default.button.save.label" /></a></span></li>
</content>
<div class="body">
<h1>
<g:message code="default.create.label" args="[entityName]" />
</h1>
<g:if test="${flash.message}">
<div class="message">
${flash.message}
</div>
</g:if>
<g:hasErrors bean="${skeletonBillInstance}">
<div class="alert alert-error">
<a class="close" data-dismiss="alert">×</a>
<g:renderErrors bean="${skeletonBillInstance}" as="list" />
</div>
</g:hasErrors>
<g:uploadForm name="SkeletonBillForm" action="save" method="post">
<div class="dialog">
<table>
<tbody>

<tr class="prop">
<td valign="top" class="name"><label for="bones"><g:message
code="skeletonBill.bones.label" default="Bones" /></label></td>
<td valign="top"
class="value ${hasErrors(bean: skeletonBillInstance, field: 'bones', 'errors')}">
<g:textField name="bones"
value="${fieldValue(bean: skeletonBillInstance, field: 'bones')}" />
</td>
</tr>

<tr class="prop">
<td valign="top" class="name"><label for="dateOfBirth"><g:message
code="skeletonBill.dateOfBirth.label" default="Date Of Birth" /></label>
</td>
<td valign="top"
class="value ${hasErrors(bean: skeletonBillInstance, field: 'dateOfBirth', 'errors')}">
<g:textField name="dateOfBirth"
value="${skeletonBillInstance?.dateOfBirth}" /> <script>$(document).ready(function () {$("#dateOfBirth").kendoDatePicker({format:"yyyy-MM-dd"})});</script>
</td>
</tr>
<tr class="prop">
<td valign="top" class="name">
<label>File Upload</label>

<input name="excelSheet" id="excelSheet" type="file" />

<script>
$(document).ready(function() {
    $("#excelSheet").kendoUpload();
},

        function onError(e) {
// Array with information about the uploaded files
            var files = e.files;

            if (e.operation == "upload") {
                alert("Failed to uploaded " + files.length + " files");
            }

// Suppress the default error message
            e.preventDefault();
        },
        function onUpload(e) {
            var files = e.files;
            if (e.operation == "upload") {
                alert("Successfully uploaded " + files.length + " files");
            }
        });
</script>
</td>
</tr>

</tbody>
</table>
</div>
</g:uploadForm>
</div>
</body>
</html>

还有Controller.gsp

def save = {
    def skeletonBillInstance = new SkeletonBill(params)


    if(!skeletonBillInstance.empty){
        println "Name: ${skeletonBill.bones}"
        flash.message = "${message(code: 'default.created.message', args: [message(code: 'skeletonBill.label', default: 'SkeletonBill'), skeletonBillInstance.id])}"
        redirect(action: "show", id: skeletonBillInstance.id)
    }
} else {
render(view: "create", model: [skeletonBillInstance: skeletonBillInstance])
}
}
4

1 回答 1

0

几件事 1) 如果你想使用 KendoUI,我不会使用 gsp 标签。请使用普通的表单标签来定义您的表单,如果您这样做,grails 会使用原型插件。2)我不会将脚本代码与标签混合。3) 如果您使用的是 grails 2.0,可以使用 KendoUI 插件,您可以在http://grails.org/plugin/kendo-ui找到更多信息

希望有帮助。

于 2012-04-30T13:44:34.127 回答