Question

有人可以告诉我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])
}
}

Answer 1

一些事情 1）如果你想使用KendoUI，我不会使用gsp标签。请使用普通的表单标签来定义您的表单，如果您执行此操作，请使用原型插件。 2）我不会将脚本代码与标签混合在一起。 3）如果你使用的是grails 2.0，你可以使用KendoUI插件，你可以在http://grails.org/plugin/kendo-ui找到更多信息

希望有所帮助。

Grails文件上传Kendoui

1 个答案: