Extjs upload（ext官网事例）-JavaSript-爱易网页

Extjs upload（ext官网事例）

日期：2014-05-16　浏览次数：20413 次

Extjs upload（ext官网例子）

http://dev.sencha.com/deploy/dev/examples/form/file-upload.html

file-upload.zip是js代码

fileuploadfield.zip是组建库（EXT官网自带的）

详细代码如下：

html

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>File Upload Field Example</title>

    <!-- ** CSS ** -->
    <!-- base library -->
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

    <!-- overrides to base library -->

    <!-- page specific -->
    <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
    <link rel="stylesheet" type="text/css" href="../ux/fileuploadfield/css/fileuploadfield.css"/>

    <style type=text/css>
        .upload-icon {
            background: url('../shared/icons/fam/image_add.png') no-repeat 0 0 !important;
        }
        #fi-button-msg {
            border: 2px solid #ccc;
            padding: 5px 10px;
            background: #eee;
            margin: 5px;
            float: left;
        }
    </style>

    <!-- ** Javascript ** -->
    <!-- ExtJS library: base/adapter -->
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

    <!-- ExtJS library: all widgets -->
    <script type="text/javascript" src="../../ext-all.js"></script>

    <!-- overrides to base library -->
    <script type="text/javascript" src="../ux/fileuploadfield/FileUploadField.js"></script>

    <!-- page specific -->
    <script type="text/javascript" src="file-upload.js"></script>

</head>
<body>
    <h1>File Upload Field</h1>
    <p>This example utilizes a custom extension to implement a file upload field.
    The js is not minified so it is readable. See <a href="file-upload.js">file-input.js</a> and
    <a href="../ux/fileuploadfield/FileUploadField.js">FileUploadField.js</a>.</p>

    <p>
        <b>Basic FileUpload</b><br />
        A typical file upload field with Ext style.  Direct editing of the text field cannot be done in a
        consistent, cross-browser way, so it is always read-only in this implementation.
        <div id="fi-basic"></div>
        <div id="fi-basic-btn"></div>
    </p>

    <p>
        <b>Basic FileUpload (Button-only)</b><br />
        You can also render the file input as a button without the text field, with access to the field's value via the
        standard <tt>Ext.form.TextField</tt> interface or by handling the <tt>fileselected</tt> event (as in this example).
        <div id="fi-button"></div>
        <div id="fi-button-msg" style="display:none;"></div>
        <div class="x-clear"></div>
    </p>

    <p>
        <b>Form Example</b><br />
        The FileUploadField can also be used in standard form layouts, with support for anchoring, validation (the
        field is required in this example), empty text, etc.  This example also demonstrates using the
        <tt>buttonCfg</tt> option to provide a customized icon upload button.
        <div id="fi-form"></div>
    </p>
</body>
</html>

ext组建库

/*!
 * Ext JS Library 3.2.1
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.ns('Ext.ux.form');

/**
 * @class Ext.ux.form.FileUploadField
 * @extends Ext.form.TextField
 * Creates a file upload field.
 * @xtype fileuploadfield
 */
Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField,  {
    /**
     * @cfg {String} buttonText The button text to display on the upload button (de

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

Extjs upload（ext官网事例）

相关资料更多>

推荐阅读更多>