jquery文件上传插件 - 自定义消息到div

时间:2013-12-30 00:18:36

标签: php jquery ajax file upload

我正在使用来自https://github.com/blueimp/jQuery-File-Upload/wiki/Options的jquery文件上传插件,并根据需要使其工作。我现在要做的是在上传被强制后进行ajax调用。然后我将从ajax调用中获取数据并通过结果div显示结果。我似乎无法让它发挥作用......

HTML:

<span class="btn btn-success fileinput-button">
<span>Select Photo 1</span>
<!-- The file input field used as target for the file upload widget -->
<input id="vPhoto1" type="file" name="vPhoto1">
</span>

<!-- The global progress bar -->
<div id="progress" class="progress progress-striped">
<div class="progress-bar progress-bar-success"></div>
</div>
<!-- The container for the uploaded files -->
<div id="files" class="files"></div>

<!-- message should populate from process.php -->
<div id="results"></div>

JS:

$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = 'process.php';
$('#photo').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');

我也尝试过使用回调来绑定它。但是它也无济于事。

简单地说,我想上传文件,一旦完成并且进度条为100%我然后想要对ph​​p页面进行ajax调用并将内容显示给div。

0 个答案:

没有答案