jquery 上传图片组件

JQuery是一款非常流行的JavaScript库，拥有丰富的插件和组件。其中，JQuery上传图片组件是非常常用的一个组件。下面就来介绍一下如何使用JQuery上传图片组件。

首先，需要引用JQuery上传图片组件的JS文件和CSS文件：

<link rel="stylesheet" href="css/jquery.fileupload.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="js/jquery.fileupload.js"></script>

它们分别是JQuery上传图片组件的样式文件、JQuery和JQueryUI的JS文件以及JQuery上传图片组件的JS文件。

然后，在HTML中设置上传图片组件的表单：

<form id="form" action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="file">
    <input type="submit" value="提交">
</form>

可以看到，表单中包含一个文件输入框和一个提交按钮，其中文件输入框的name属性必须为"file"。

最后，在JavaScript中调用JQuery上传图片组件的函数：

$(function() {
    $('#file').fileupload({
        url: 'upload.php',
        dataType: 'json',
        done: function(e, data) {
            $.each(data.result.files, function(index, file) {
                $('
').text(file.name).appendTo('#files');
            });
        },
        progressall: function(e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css('width', progress + '%');
        }
    });
});

通过调用$('#file').fileupload()函数来初始化上传图片组件，其中url属性指定上传图片的地址，dataType属性指定返回数据的格式。done属性是上传成功后的回调函数，在其中可以获取上传成功的文件信息。progressall属性是上传过程中的回调函数，可以在其中实时更新上传进度条的进度。

总之，使用JQuery上传图片组件非常简单，只需要引用相关文件、设置表单和调用函数即可完成上传图片的任务。