jQuery-file-Upload使用介绍

最新推荐文章于 2025-03-18 21:16:42 发布

善良死神

最新推荐文章于 2025-03-18 21:16:42 发布

阅读量3.9w

点赞数 2

分类专栏： JavaScript 文章标签：插件 jquery

本文链接：https://blog.csdn.net/li741350149/article/details/74453000

版权

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用jQuery File Upload插件实现文件上传功能。包括插件安装、配置及前后端交互过程，演示了进度条展示及上传结果反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

开发过程中有时候需要用户在前段上传图片信息，我们通常可以使用form标签设置enctype=”multipart/form-data” 属性上传图片，当我们点击submit按钮的时候，图片信息就会自动的保存在预定义变量$_FILES中，我们在后台就可以通过这个预定义变量得到前台上传的图片信息，除了这种方法还有很多插件可以实现上传图片功能的。jQuery-file-Upload就是其中一种。

jQuery-file-Upload介绍

jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。

下载插件

网上下载地址很多jQuery-file-Upload下载

使用步骤

插件下载完成后，我们可以可以在项目中进行引用，使用插件提供的功能。

这个功能实现起来非常简单

引入js文件
- jquey-1.8.3.min.js
- jquery-ui-widget.js
- jquery.iframe-transport.js
- jquery.fileupload.js

编写html代码

编写input标签，可以进行图片选择

<input id="fileupload" type="file" name="file">

编写一个div显示进度条，初始长度为0%
```
<div class="bar" style="width: 0%;"></div>
```

编写一个img标签显示上传之后的图片

<img id="uploadimg" src="__PUBLIC__/images/bg.jpg" width="400px" height="408px"/>

编写JS代码，也就是实现上传功能。

<script>
    $('#fileupload').fileupload({
        dataType: 'json',
        url: "{:U('setFile')}",//文件的后台接受地址
        //设置进度条
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100);
            $('#progress .bar').css(
                'width',
                progress + '%'
            );
        },
        //上传完成之后的操作，显示在img里面
        done: function (e, data){
            $("#uploadimg").attr({src: data.result.pic_url});
            $("#uploadimg").css({width: "400px", height: "400px"});
        }
    });
</script>

这个案例使用的是PHP的ThinkPHP框架进行搭建的。所以url地址这样写，如果你不想把url地址写在js里面，也可以写在input标签上

<input id="fileupload" type="file" name="file" data-url="{:U('setFile')}">

这样当我们选择完图片后就会自动上传图片到后台，在后台就可以对上传的图片进行保存处理，并把处理后的图片链接返回。因为本案例使用的是TP框架，因此就可以使用到TP框架的Upload类进行操作。

后台PHP代码

<?php
namespace File\Controller;
use Think\Controller;
use Think\Upload;

class FileController extends Controller{

    public function index(){
        $this -> display();
    }

    public function setFile(){
        if($_FILES['file']['error']){
            $data['data'] = 0;
        }else{
            $pic_url = $this -> uploadPic('test');
            $data['pic_url'] = $pic_url;
        }
        $this -> ajaxReturn($data);
    }

    /**
     * @param $file 保存的文件名
     * @return string
     */
    private function uploadPic($file){
        $upload = new Upload();
        $upload -> maxSize = 10145728;
        $upload -> exts = array('jpg','png','jpeg');
        $upload -> rootPath = './Uploads/';
        $upload -> savePath = $file . '/';
        $upload -> saveName = 'time';
        $info = $upload -> upload();
        if(!$info){
            $this -> error($upload -> getError());
        }else{
            $xw_img = '/Uploads/' . $info['file']['savepath'] . $info['file']['savename'];
            return $xw_img;
        }
    }
}

前段代码

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery File Upload Example</title>
</head>
<style>
    .bar {
        height: 18px;
        background: green;
    }
    .content{
        width: 100%;text-align: center;margin-top: 70px;
    }
    #progress{
        border-radius:6px;width: 300px;background: red;
        margin: 10px auto;
    }
</style>
<body>

<div class="content">
    <input id="fileupload" type="file" name="file" data-url="{:U('setFile')}">
    <div id="progress">
        <div class="bar" style="width: 0%;"></div>
    </div>
    <img id="uploadimg" src="__PUBLIC__/images/bg.jpg" width="400px" height="408px"/>
</div>

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="__PUBLIC__/jquery_fileupload/js/vendor/jquery.ui.widget.js"></script>
<script src="__PUBLIC__/jquery_fileupload/js/jquery.iframe-transport.js"></script>
<script src="__PUBLIC__/jquery_fileupload/js/jquery.fileupload.js"></script>
<script>
    $('#fileupload').fileupload({
        dataType: 'json',
        //url: "{:U('setFile')}",//文件的后台接受地址
        //设置进度条
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100);
            $('#progress .bar').css(
                'width',
                progress + '%'
            );
        },
        //上传完成之后的操作，显示在img里面
        done: function (e, data){
            $("#uploadimg").attr({src: data.result.pic_url});
            $("#uploadimg").css({width: "400px", height: "400px"});
        }
    });
</script>
</body>
</html>