JavaScript
Ajax

jQuery-File-Uploadを使う

More than 1 year has passed since last update.

概要

jQuery-File-Uploadを使ったajaxファイルアップロード
https://github.com/blueimp/jQuery-File-Upload

デモはこっち

今回はBasic versionを使用した.

実装

basic.htmlからコピペ

ソースをダウンロードし,basic.htmlの内容をコピーすれば実装できるはず.(できた)

js,cssのインポート

※bootstrap,jqueryは別途インポート必要

import_file_upload
    <script src="file_upload/js/vendor/jquery.ui.widget.js"></script>
    <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
    <script src="file_upload/js/jquery.iframe-transport.js"></script>
    <!-- The basic File Upload plugin -->
    <script src="file_upload/js/jquery.fileupload.js"></script>
    <link rel="stylesheet" href="file_upload/css/jquery.fileupload.css" />

body

basic.htmlからコピペ

body
<span class="btn btn-success fileinput-button">
        <i class="glyphicon glyphicon-plus"></i>
        <span>Select files...</span>
        <!-- The file input field used as target for the file upload widget -->
        <input id="fileupload" type="file" name="files[]" multiple>
    </span>
<br>
<br>
<!-- The global progress bar -->
<div id="progress" class="progress">
    <div class="progress-bar progress-bar-success"></div>
</div>

アップロードscript

basic.htmlに記載されているscriptをコピペ
urlは実際のupload先URLに変更すること

sample
    <script>
        $(function () {
            'use strict';

            var url = ""; // 要url変更
            $('#fileupload').fileupload({
                url: url,
                dataType: 'json',
                done: function (e, data) {
                    $.each(data.result.files, function (index, file) {
                        $('<p/>').text(file.name).appendTo('#files');
                    });
                },
                progressall: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#progress .progress-bar').css(
                            'width',
                            progress + '%'
                    );
                }
            }).prop('disabled', !$.support.fileInput)
                    .parent().addClass($.support.fileInput ? undefined : 'disabled');
        });
    </script>

validate

指定ファイルのタイプ,ファイルサイズでアップロード可否をチェックする.
addコールバック?を実装し,その中でチェックを行う.
アップロード可のときは,data.submit();を呼ぶ.

stackoverflowでContentType、ファイルサイズチェックのコードがあったので拝借。
http://stackoverflow.com/questions/17451629/maxfilesize-and-acceptfiletypes-in-blueimp-file-upload-plugin-do-not-work-why

ContentType、ファイルサイズチェック
            $('#fileupload').fileupload({
                // 中略 //
                // -- ここから追加
                add: function(e, data){
                    var uploadErrors = [];
                    var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i; //content type
                    if(data.Files[0]['type'].length && !acceptFileTypes.test(data.Files[0]['type'])) {
                        uploadErrors.push('Not an accepted file type');
                    }
                    if(data.files[0]['size'].length && data.files[0]['size'] > 5000000) {
                        uploadErrors.push('Filesize is too big');
                    }
                    if(uploadErrors.length > 0) {
                        alert(uploadErrors.join("\n"));
                    } else {
                        data.submit();
                    }
                },

MIME Content-type 表

ContentTypeの参考に。
http://www.kyoto-su.ac.jp/ccinfo/use_web/mine_contenttype/