jquery.fileupload With requirejs

時間 2019-11-16

標籤 jquery.fileupload jquery fileupload requirejs 欄目 JQuery 简体版

原文原文鏈接

這個需求在官方github的wiki上是有文檔的，只是照着寫了之後瀏覽器各類報錯，而後通過不斷嘗試，終於不報錯了。javascript

html按官方Demo寫，只引入css，js只引一個requirejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" href="../assets/bs3/bootstrap.min.css">
    <link rel="stylesheet" href="../assets/fileupload/css/jquery.fileupload.css"/>
</head>
<body>

<!-- The fileinput-button span is used to style the file input field as button -->
    <span class="btn btn-success fileinput-button">
        <i class="glyphicon glyphicon-plus"></i>
        <span>選擇圖片</span>
        <!-- The file input field used as target for the file upload widget -->
        <input id="fileupload" type="file" name="file" accept="image/jpeg, image/png">
    </span>
<br>
<!-- The global progress bar -->
<div id="progress" class="progress">
    <div class="progress-bar progress-bar-success"></div>
</div>
<!-- The container for the uploaded files -->
<div id="files" class="files"></div>
<br>

<script data-main="fileupload-require" src="../assets/requirejs/require.js"></script>
</body>
</html>

fileupload-require.js

/**
 * Created by Misty on 2015/7/15.
 */
var host = "";
require.config({

    paths: {
        jquery: host + '/assets/jq/jquery-1.11.3.min',
        text: host + '/assets/requirejs/text.min',
        css: host + '/assets/requirejs/css.min',
        bootstrap: host + '/assets/bs3/bootstrap.min',
        'jquery.ui.widget': host + '/assets/fileupload/js/vendor/jquery.ui.widget',
        'jquery.fileupload': host + '/assets/fileupload/js/jquery.fileupload',
        'jquery.fileupload_css': host + '/assets/fileupload/css/jquery.fileupload',
        'jquery.iframe-transport': host + '/assets/fileupload/js/jquery.iframe-transport',
        'jquery.fileupload-process': host + '/assets/fileupload/js/jquery.fileupload-process',
        'jquery.fileupload-image': host + '/assets/fileupload/js/jquery.fileupload-image',
        'jquery.fileupload-validate': host + '/assets/fileupload/js/jquery.fileupload-validate',
        'canvas-to-blob': host + '/assets/fileupload/js/vendor/canvas-to-blob.min',
        // 這裏要注意，官方文檔用的是load-image.all.min.js，但老是報錯，改爲這個就正常了。另外，即便用了all，require也會去加載meta，exif等js。
        'load-image': host + '/assets/loadimage/js/load-image', // don't use load-image.all
        'load-image-meta': host + '/assets/loadimage/js/load-image-meta',
        'load-image-exif': host + '/assets/loadimage/js/load-image-exif',
        'load-image-ios': host + '/assets/loadimage/js/load-image-ios'
    },
    // 若是想用require-css加載css，就按註解掉的寫。
    //deps: ['css'],
    shim: {
        'bootstrap': {
            deps: ['jquery'/*'css!bootstrap'*/]
        }
        //,
        //'jquery.fileupload': {
        //    deps: ['css!jquery.fileupload_css']
        //}
    }
});

require(
    [
        'jquery',
        'bootstrap',
        'jquery.fileupload-image'
    ],
    function () {
        $(function () {
            // fileupload初始化代碼寫這裏
        })
    });

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。