誰かがjQuery File Uploadプラグインを実装する方法を説明できますか?


116

編集(2019年10月):

6年後、jQuery File Uploadは明らかに人々を狂わせています。ここで答えに小さな慰めが見つからない場合は、NPM検索して最新の代替策を探してください。面倒な価値はないと私は約束します。

以前の編集ではUploadifyをお勧めしましたが、コメント投稿者が指摘したように、無料版を提供していないようです。Uploadifyだったので、とにかく2013。


編集:

これはまだトラフィックを獲得しているようですので、私がやったことを説明します。受け入れられた回答のチュートリアルに従って、最終的にプラグインを機能させました。ただし、jQueryファイルのアップロードは本当に面倒なので、より単純なファイルアップロードプラグインを探している場合は、Uploadifyを強くお勧めします。答えが指摘したように、それは非営利目的でのみ無料です。


バックグラウンド

blueimpのjQuery File Uploadを使用して、ユーザーがファイルをアップロードできるようにしています。箱から出しただけで、セットアップ手順に従って完全に機能します。しかし、それを私のWebサイトで実際に使用するには、いくつかのことができるようにしたいと思います。

  • 既存の任意のページにアップローダーを含める
  • アップロードされたファイルのディレクトリを変更します

プラグインのすべてのファイルは、ルートの下のフォルダーにあります。

私はもう試した...

  • デモページをルートに移動し、必要なスクリプトのパスを更新する
  • ここで提案されているように、UploadHandler.phpファイルの「upload_dir」および「upload_url」オプションを変更します
  • デモJavaScriptの2行目のURLを変更する

すべての場合で、プレビューが表示され、進行状況バーが実行されますが、ファイルのアップロードに失敗し、コンソールに次のエラーが表示されますUncaught TypeError: Cannot read property 'files' of undefined。プラグインのすべての部分がどのように機能するか理解していないため、デバッグが困難です。

コード

デモページのJavaScript:

$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = 'file_upload/server/php/UploadHandler.php',
    uploadButton = $('<button/>')
        .addClass('btn')
        .prop('disabled', true)
        .text('Processing...')
        .on('click', function () {
            var $this = $(this),
                data = $this.data();
            $this
                .off('click')
                .text('Abort')
                .on('click', function () {
                    $this.remove();
                    data.abort();
                });
            data.submit().always(function () {
                $this.remove();
            });
        });
$('#fileupload').fileupload({
    url: url,
    dataType: 'json',
    autoUpload: false,
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
    maxFileSize: 5000000, // 5 MB
    // Enable image resizing, except for Android and Opera,
    // which actually support image resizing, but fail to
    // send Blob objects via XHR requests:
    disableImageResize: /Android(?!.*Chrome)|Opera/
        .test(window.navigator.userAgent),
    previewMaxWidth: 100,
    previewMaxHeight: 100,
    previewCrop: true
}).on('fileuploadadd', function (e, data) {
    data.context = $('<div/>').appendTo('#files');
    $.each(data.files, function (index, file) {
        var node = $('<p/>')
                .append($('<span/>').text(file.name));
        if (!index) {
            node
                .append('<br>')
                .append(uploadButton.clone(true).data(data));
        }
        node.appendTo(data.context);
    });
}).on('fileuploadprocessalways', function (e, data) {
    var index = data.index,
        file = data.files[index],
        node = $(data.context.children()[index]);
    if (file.preview) {
        node
            .prepend('<br>')
            .prepend(file.preview);
    }
    if (file.error) {
        node
            .append('<br>')
            .append(file.error);
    }
    if (index + 1 === data.files.length) {
        data.context.find('button')
            .text('Upload')
            .prop('disabled', !!data.files.error);
    }
}).on('fileuploadprogressall', function (e, data) {
    var progress = parseInt(data.loaded / data.total * 100, 10);
    $('#progress .bar').css(
        'width',
        progress + '%'
    );
}).on('fileuploaddone', function (e, data) {
    $.each(data.result.files, function (index, file) {
        var link = $('<a>')
            .attr('target', '_blank')
            .prop('href', file.url);
        $(data.context.children()[index])
            .wrap(link);
    });
}).on('fileuploadfail', function (e, data) {
    $.each(data.result.files, function (index, file) {
        var error = $('<span/>').text(file.error);
        $(data.context.children()[index])
            .append('<br>')
            .append(error);
    });
}).prop('disabled', !$.support.fileInput)
    .parent().addClass($.support.fileInput ? undefined : 'disabled');
});


ドキュメントがないことに驚きました。変更するのは簡単なことのようです。これを行う方法を誰かが説明していただければ幸いです。


10
良い質問形式。組織を見てうれしいです。
jdero 2013

エラー行の直前のコンソールで「e」と「data」を出力します。値は何ですか。
john 4d5 2013

3
Uploadi fyはMITライセンスであり、完全に無料です。ただし、同じ開発/ウェブサイトからのUploadi Fiveは、使用方法に応じて$
5〜

2
2年間で、jQuery-File-Uploadのドキュメントは改善されていません。ああ。
Chuck Le Butt

1
@MartinJHある時点でアップロードがあった可能性がありますが、現時点では有料アップロードiFiveバージョンの1つしかありません。また、デモもありません。それはビデオです。悪い形。
Steve Horvath、

回答:


72

私は数日前に同様の機能を探していて、tutorialzineの優れたチュートリアルに出会いました。これが実際の例です。完全なチュートリアルはここにあります

ファイルアップロードダイアログを保持するシンプルなフォーム:

<form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
  <input type="file" name="uploadctl" multiple />
  <ul id="fileList">
    <!-- The file list will be shown here -->
  </ul>
</form>

そしてここにファイルをアップロードするためのjQueryコードがあります:

$('#upload').fileupload({

  // This function is called when a file is added to the queue
  add: function (e, data) {
    //This area will contain file list and progress information.
    var tpl = $('<li class="working">'+
                '<input type="text" value="0" data-width="48" data-height="48" data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" />'+
                '<p></p><span></span></li>' );

    // Append the file name and file size
    tpl.find('p').text(data.files[0].name)
                 .append('<i>' + formatFileSize(data.files[0].size) + '</i>');

    // Add the HTML to the UL element
    data.context = tpl.appendTo(ul);

    // Initialize the knob plugin. This part can be ignored, if you are showing progress in some other way.
    tpl.find('input').knob();

    // Listen for clicks on the cancel icon
    tpl.find('span').click(function(){
      if(tpl.hasClass('working')){
              jqXHR.abort();
      }
      tpl.fadeOut(function(){
              tpl.remove();
      });
    });

    // Automatically upload the file once it is added to the queue
    var jqXHR = data.submit();
  },
  progress: function(e, data){

        // Calculate the completion percentage of the upload
        var progress = parseInt(data.loaded / data.total * 100, 10);

        // Update the hidden input field and trigger a change
        // so that the jQuery knob plugin knows to update the dial
        data.context.find('input').val(progress).change();

        if(progress == 100){
            data.context.removeClass('working');
        }
    }
});
//Helper function for calculation of progress
function formatFileSize(bytes) {
    if (typeof bytes !== 'number') {
        return '';
    }

    if (bytes >= 1000000000) {
        return (bytes / 1000000000).toFixed(2) + ' GB';
    }

    if (bytes >= 1000000) {
        return (bytes / 1000000).toFixed(2) + ' MB';
    }
    return (bytes / 1000).toFixed(2) + ' KB';
}

そして、ここにデータを処理するためのPHPコードサンプルがあります:

if($_POST) {
    $allowed = array('jpg', 'jpeg');

    if(isset($_FILES['uploadctl']) && $_FILES['uploadctl']['error'] == 0){

        $extension = pathinfo($_FILES['uploadctl']['name'], PATHINFO_EXTENSION);

        if(!in_array(strtolower($extension), $allowed)){
            echo '{"status":"error"}';
            exit;
        }

        if(move_uploaded_file($_FILES['uploadctl']['tmp_name'], "/yourpath/." . $extension)){
            echo '{"status":"success"}';
            exit;
        }
        echo '{"status":"error"}';
    }
    exit();
}

上記のコードは、既存のフォームに追加できます。このプログラムは、追加された画像を自動的にアップロードします。この機能は変更可能であり、既存のフォームを送信しているときに画像を送信できます。

実際のコードで私の答えを更新しました。コードの原作者へのすべてのクレジット。

出典:http : //tutorialzine.com/2013/05/mini-ajax-file-upload-form/


2
そのチュートリアルの重要な部分をここにコピーできるので、それが消えても回答は引き続き役に立ちますか?

1
しかし、盗用しないように注意してください
tacaswell 2013

1
注意:PHPコードスニペットを使用している場合は、if($_POST) ステートメントを削除してください。POSTは空であることになっていますが、ファイルの内容はで送信され$_FILES['upfile']['tmp_name']ます。うまくいけば、これは誰かの時間を節約できます。
エドワード


上記のスクリプトを実行するために必要なjs / jqueryファイルを教えてください
Manasa

28

私はjQuery Uploadとの戦いに2時間費やしましたが、依存関係の量が原因であきらめました(13個のJSファイルを含めて、すべての口笛を吹き込みました)。

私はもう少し検索して、Dropzone.jsと呼ばれるきちんとしたプロジェクトに出くわしましたて、依存関係のない。

著者は、jQueryファイルアップロードプラグインに触発されたブートストラップデモも作成しました。

これが他の誰かの時間を節約することを願っています。


1
注意すべき重要な点:Dropzone.jsは見栄えは良いですが、IE10以降でのみサポートされます。jQueryファイルのアップロードはIE6からサポートされます;)
Nickvda

11
jQuery File Uploadを機能させることは不可能です。非常に優れた機能を備えているため、何時間もかけて試行錯誤を繰り返しましたが、ぎりぎりのところ、私の心は苦痛に満ちていました!!! なんて残念なことでしょう!次に、Dropzone.jsに関するあなたの投稿を見て、5分で私はそれを私が望んでいた方法で機能させました!あなたは私を救った...
リゴン

十分に感謝することはできません。jQuery-FIle-Uploadを思い通りに機能させるのに12時間近く費やしてきましたが、最後にこの質問に遭遇しました。あなたは私を救いました。
nd

これはデータベース駆動のjqueryファイルのアップロード例です: github.com/CodeHeight/ImageLibrary
JoshYates1980

私は3日間を費やしましたが、それでもコードをカスタマイズできません
May Weather VN

4

私もこれに苦労しましたが、UploadHandler.phpでパスがどのように機能するかがわかったら、それを機能させました。upload_dirとupload_urlは、機能するために確認する唯一の設定に関するものです。デバッグ情報については、サーバーのエラーログも確認してください。


3

ドロッパーjqueryプラグインを使用した画像プレビュー付きの画像ドラッグアンドドロップアップローダーを確認してください。

HTML

<div class="target" width="78" height="100"><img /></div>

JS

$(".target").dropper({
    action: "upload.php",

}).on("start.dropper", onStart);
function onStart(e, files){
console.log(files[0]);

    image_preview(files[0].file).then(function(res){
$('.dropper-dropzone').empty();
//$('.dropper-dropzone').css("background-image",res.data);
 $('#imgPreview').remove();        
$('.dropper-dropzone').append('<img id="imgPreview"/><span style="display:none">Drag and drop files or click to select</span>');
var widthImg=$('.dropper-dropzone').attr('width');
        $('#imgPreview').attr({width:widthImg});
    $('#imgPreview').attr({src:res.data});

    })

}

function image_preview(file){
    var def = new $.Deferred();
    var imgURL = '';
    if (file.type.match('image.*')) {
        //create object url support
        var URL = window.URL || window.webkitURL;
        if (URL !== undefined) {
            imgURL = URL.createObjectURL(file);
            URL.revokeObjectURL(file);
            def.resolve({status: 200, message: 'OK', data:imgURL, error: {}});
        }
        //file reader support
        else if(window.File && window.FileReader)
        {
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onloadend = function () {
                imgURL = reader.result;
                def.resolve({status: 200, message: 'OK', data:imgURL, error: {}});
            }
        }
        else {
            def.reject({status: 1001, message: 'File uploader not supported', data:imgURL, error: {}});
        }
    }
    else
        def.reject({status: 1002, message: 'File type not supported', error: {}});
    return def.promise();
}

$('.dropper-dropzone').mouseenter(function() {
 $( '.dropper-dropzone>span' ).css("display", "block");
});

$('.dropper-dropzone').mouseleave(function() {
 $( '.dropper-dropzone>span' ).css("display", "none");
});

CSS

.dropper-dropzone{
    width:78px;
padding:3px;
    height:100px;
position: relative;
}
.dropper-dropzone>img{
    width:78px;
    height:100px;
margin-top=0;
}

.dropper-dropzone>span {
    position: absolute;
    right: 10px;
    top: 20px;
color:#ccc;


}

.dropper .dropper-dropzone{

padding:3px !important    
}

デモJsfiddle


これは非常にシンプルなソリューションです。
Miron、

2

これはファイルをアップロードするための優れたAngularプラグインであり、無料です!

角度ファイルのアップロード


2
こんにちは。回答としてリンクを投稿しないでください。サイトがオフラインになったりリンクが変更されたりすると、回答が役に立たなくなります。代わりに、サイトの情報を使用して回答を作成し、参照としてのみリンクを使用してください。ありがとう。
クトゥルフ

1

Railsでこのプラグインにしばらく苦労しましたが、誰かが私が作成したすべてのコードを廃止することを認めました。

Railsでこれを使用していないようですが、誰かがこれを使用している場合は、このgemをチェックアウトしてください。ソースはこちら-> jQueryFileUpload Rails

更新:

コメンターを満足させるために、私の回答を更新しました。基本的に「この宝石を使用してここにソースコードがある、それはそれを長い道のりを行い、その後消えた場合」。



1

Droply.jsはこれに最適です。シンプルで、すぐに使えるデモサイトがあらかじめパッケージされています。


0

あなたはuploadifyを使うことができます これは私が使用した中で最高のマルチアップロードjqueryプラグインです。

実装は簡単で、ブラウザのサポートは完璧です。


7
フラッシュが必要です... :(
エヴァ

2
HTML 5バージョンを使用できます:)
CORSAIR 2014

5
私が間違っていないのであれば、uploadifyのhtml5バージョンは無料ではありません。費用は5ドルです。uploadify.com/download
0112

2
しかし、これは500だけで5 $ではありません
CORSAIR

7
uploadifyを商用目的で使用したい場合は、商用ライセンス($ 100)を購入する必要があります。uploadify.com/ download / download
Tim

0

UIプラグインの場合、jspページとSpring MVCを使用します。

サンプルhtmlid属性がfileuploadのフォーム要素内にある必要があります

    <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="fileupload-buttonbar">
    <div>
        <!-- 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>Add files</span>
            <input id="fileuploadInput" type="file" name="files[]" multiple>
        </span>
        <%-- https://stackoverflow.com/questions/925334/how-is-the-default-submit-button-on-an-html-form-determined --%>
        <button type="button" class="btn btn-primary start">
            <i class="glyphicon glyphicon-upload"></i>
            <span>Start upload</span>
        </button>
        <button type="reset" class="btn btn-warning cancel">
            <i class="glyphicon glyphicon-ban-circle"></i>
            <span>Cancel upload</span>
        </button>
        <!-- The global file processing state -->
        <span class="fileupload-process"></span>
    </div>
    <!-- The global progress state -->
    <div class="fileupload-progress fade">
        <!-- The global progress bar -->
        <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
            <div class="progress-bar progress-bar-success" style="width:0%;"></div>
        </div>
        <!-- The extended global progress state -->
        <div class="progress-extended">&nbsp;</div>
    </div>
</div>
<!-- The table listing the files available for upload/download -->
<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/css/jquery.fileupload.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/css/jquery.fileupload-ui.css">

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/js/vendor/jquery.ui.widget.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/js/jquery.fileupload.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/js/jquery.fileupload-process.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/js/jquery.fileupload-validate.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/js/jquery.fileupload-ui.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
            var maxFileSizeBytes = ${maxFileSizeBytes};
        if (maxFileSizeBytes < 0) {
            //-1 or any negative value means no size limit
            //set to undefined
            ///programming/5795936/how-to-set-a-javascript-var-as-undefined
            maxFileSizeBytes = void 0;
        }

        //https://github.com/blueimp/jQuery-File-Upload/wiki/Options
        ///programming/34063348/jquery-file-upload-basic-plus-ui-and-i18n
        ///programming/11337897/how-to-customize-upload-download-template-of-blueimp-jquery-file-upload
        $('#fileupload').fileupload({
            url: '${pageContext.request.contextPath}/app/uploadResources.do',
            fileInput: $('#fileuploadInput'),
            acceptFileTypes: /(\.|\/)(jrxml|png|jpe?g)$/i,
            maxFileSize: maxFileSizeBytes,
            messages: {
                acceptFileTypes: '${fileTypeNotAllowedText}',
                maxFileSize: '${fileTooLargeMBText}'
            },
            filesContainer: $('.files'),
            uploadTemplateId: null,
            downloadTemplateId: null,
            uploadTemplate: function (o) {
                var rows = $();
                $.each(o.files, function (index, file) {
                    var row = $('<tr class="template-upload fade">' +
                            '<td><p class="name"></p>' +
                            '<strong class="error text-danger"></strong>' +
                            '</td>' +
                            '<td><p class="size"></p>' +
                            '<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">' +
                            '<div class="progress-bar progress-bar-success" style="width:0%;"></div></div>' +
                            '</td>' +
                            '<td>' +
                            (!index && !o.options.autoUpload ?
                                    '<button class="btn btn-primary start" disabled>' +
                                    '<i class="glyphicon glyphicon-upload"></i> ' +
                                    '<span>${startText}</span>' +
                                    '</button>' : '') +
                            (!index ? '<button class="btn btn-warning cancel">' +
                                    '<i class="glyphicon glyphicon-ban-circle"></i> ' +
                                    '<span>${cancelText}</span>' +
                                    '</button>' : '') +
                            '</td>' +
                            '</tr>');
                    row.find('.name').text(file.name);
                    row.find('.size').text(o.formatFileSize(file.size));
                    if (file.error) {
                        row.find('.error').text(file.error);
                    }
                    rows = rows.add(row);
                });
                return rows;
            },
            downloadTemplate: function (o) {
                var rows = $();
                $.each(o.files, function (index, file) {
                    var row = $('<tr class="template-download fade">' +
                            '<td><p class="name"></p>' +
                            (file.error ? '<strong class="error text-danger"></strong>' : '') +
                            '</td>' +
                            '<td><span class="size"></span></td>' +
                            '<td>' +
                            (file.deleteUrl ? '<button class="btn btn-danger delete">' +
                                    '<i class="glyphicon glyphicon-trash"></i> ' +
                                    '<span>${deleteText}</span>' +
                                    '</button>' : '') +
                            '<button class="btn btn-warning cancel">' +
                            '<i class="glyphicon glyphicon-ban-circle"></i> ' +
                            '<span>${clearText}</span>' +
                            '</button>' +
                            '</td>' +
                            '</tr>');
                    row.find('.name').text(file.name);
                    row.find('.size').text(o.formatFileSize(file.size));
                    if (file.error) {
                        row.find('.error').text(file.error);
                    }
                    if (file.deleteUrl) {
                        row.find('button.delete')
                                .attr('data-type', file.deleteType)
                                .attr('data-url', file.deleteUrl);
                    }
                    rows = rows.add(row);
                });
                return rows;
            }
        });

    });
</script>

アップロードと削除のリクエストハンドラのサンプル

    @PostMapping("/app/uploadResources")
public @ResponseBody
Map<String, List<FileUploadResponse>> uploadResources(MultipartHttpServletRequest request,
        Locale locale) {
    //https://github.com/jdmr/fileUpload/blob/master/src/main/java/org/davidmendoza/fileUpload/web/ImageController.java
    //https://github.com/blueimp/jQuery-File-Upload/wiki/Setup#using-jquery-file-upload-ui-version-with-a-custom-server-side-upload-handler
    Map<String, List<FileUploadResponse>> response = new HashMap<>();
    List<FileUploadResponse> fileList = new ArrayList<>();

    String deleteUrlBase = request.getContextPath() + "/app/deleteResources.do?filename=";

    //http://docs.spring.io/spring/docs/current/javadoc-api/org/springframework/web/multipart/MultipartRequest.html
    Iterator<String> itr = request.getFileNames();
    while (itr.hasNext()) {
        String htmlParamName = itr.next();
        MultipartFile file = request.getFile(htmlParamName);
        FileUploadResponse fileDetails = new FileUploadResponse();
        String filename = file.getOriginalFilename();
        fileDetails.setName(filename);
        fileDetails.setSize(file.getSize());
        try {
            String message = saveFile(file);
            if (message != null) {
                String errorMessage = messageSource.getMessage(message, null, locale);
                fileDetails.setError(errorMessage);
            } else {
                //save successful
                String encodedFilename = URLEncoder.encode(filename, "UTF-8");
                String deleteUrl = deleteUrlBase + encodedFilename;
                fileDetails.setDeleteUrl(deleteUrl);
            }
        } catch (IOException ex) {
            logger.error("Error", ex);
            fileDetails.setError(ex.getMessage());
        }

        fileList.add(fileDetails);
    }

    response.put("files", fileList);

    return response;
}

@PostMapping("/app/deleteResources")
public @ResponseBody
Map<String, List<Map<String, Boolean>>> deleteResources(@RequestParam("filename") List<String> filenames) {
    Map<String, List<Map<String, Boolean>>> response = new HashMap<>();
    List<Map<String, Boolean>> fileList = new ArrayList<>();

    String templatesPath = Config.getTemplatesPath();
    for (String filename : filenames) {
        Map<String, Boolean> fileDetails = new HashMap<>();

        String cleanFilename = ArtUtils.cleanFileName(filename);
        String filePath = templatesPath + cleanFilename;

        File file = new File(filePath);
        boolean deleted = file.delete();

        if (deleted) {
            fileDetails.put(cleanFilename, true);
        } else {
            fileDetails.put(cleanFilename, false);
        }

        fileList.add(fileDetails);
    }

    response.put("files", fileList);

    return response;
}

必要なJSON応答を生成するためのサンプルクラス

    public class FileUploadResponse {
    //https://github.com/blueimp/jQuery-File-Upload/wiki/Setup#using-jquery-file-upload-ui-version-with-a-custom-server-side-upload-handler

    private String name;
    private long size;
    private String error;
    private String deleteType = "POST";
    private String deleteUrl;

    /**
     * @return the name
     */
    public String getName() {
        return name;
    }

    /**
     * @param name the name to set
     */
    public void setName(String name) {
        this.name = name;
    }

    /**
     * @return the size
     */
    public long getSize() {
        return size;
    }

    /**
     * @param size the size to set
     */
    public void setSize(long size) {
        this.size = size;
    }

    /**
     * @return the error
     */
    public String getError() {
        return error;
    }

    /**
     * @param error the error to set
     */
    public void setError(String error) {
        this.error = error;
    }

    /**
     * @return the deleteType
     */
    public String getDeleteType() {
        return deleteType;
    }

    /**
     * @param deleteType the deleteType to set
     */
    public void setDeleteType(String deleteType) {
        this.deleteType = deleteType;
    }

    /**
     * @return the deleteUrl
     */
    public String getDeleteUrl() {
        return deleteUrl;
    }

    /**
     * @param deleteUrl the deleteUrl to set
     */
    public void setDeleteUrl(String deleteUrl) {
        this.deleteUrl = deleteUrl;
    }

}

https://pitipata.blogspot.co.ke/2017/01/using-jquery-file-upload-ui.htmlを参照してください

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.