jQuery File Upload文件上传插件简单使用

Posted 2020-10-22 var-chu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery File Upload文件上传插件简单使用相关的知识，希望对你有一定的参考价值。

前言

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

jQuery-file-Upload介绍

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

使用步骤

1.引入

<!--1. 基于jquery ui-->
<script src="assets/jqueryFileupload/jquery.ui.widget.js"></script>
<!--2. 遇见跨域-->
<!--<script src="assets/jqueryFileupload/jquery.iframe-transport.js"></script>-->
<!--3. 核心文件-->
<script src="assets/jqueryFileupload/jquery.fileupload.js"></script>

2.准备html

<div class="form-group" style="position: relative">
      <button class="btn btn-default">上传图片</button>
      <input id="fileUpload" type="file" name="pic1">
<!--安置一个隐藏的input标签 用来存储图片上传成功后的图片路径   以便提交表单时 一并提交  以后就能根据路径找到这个文件了-->
      <input type="hidden" name="brandLogo">
</div>
<!-- 此盒子与插件功能无关 显示上传图片的预览 未上传时时默认图 一般为灰色底图  -->
<div class="img_box">
　　<img src="images/default.png"  width="100" height="100">
</div>

3.js代码

 /*3.2 初始化 上传图片*/
    $(‘#fileUpload‘).fileupload({
        url:‘/category/addSecondCategoryPic‘,
        dataType:‘json‘,
        done:function (e,data) {
            $(‘.img_box img‘).attr(‘src‘,data.result.picAddr);//动态修改预览图的src
            $(‘[name="brandLogo"]‘).val(data.result.picAddr);//图片上传成功后 后台返回来的图片路径  前后台要约定好
            $(‘#addCategoryForm‘).data(‘bootstrapValidator‘).updateStatus(‘brandLogo‘,‘VALID‘,null)
        }
    });