uploadify文件上传插件使用教程uploadify插件

103 阅读 0 评论 68 点赞

我是靠谱客的博主帅气外套，这篇文章主要介绍uploadify文件上传插件使用教程uploadify插件，现在分享给大家，希望可以做个参考。

uploadify插件

Uploadify是jQuery的一个文件上传插件，带有上传进度条。（easy to implement, highly customizable）

官网

官方文档

使用步骤

html结构

复制代码

1
<input type="file" id="file_upload_1">

引入文件

复制代码

1
2
3
4
5
6
<!--如果想要样式，那就需要引入, 非必须-->
<link rel="stylesheet" href="uploadify/uploadify.css">

<!--必须引入以下两个文件-->
<script src="jquery-1.12.4.js"></script>
<script src="uploadify/jquery.uploadify.js"></script>

使用插件

复制代码

1
2
3
4
5
6
7
8
 $(function() {
    $("#file_upload_1").uploadify({
      height        : 30,//高度
      swf           : 'uploadify/uploadify.swf',//通过swf上传，这个必须指定
      uploader      : 'uploadify/uploadify.php',//图片上传的服务端地址。
      width         : 120//宽度
    });
  });

常用参数解释

复制代码

1
2
3
4
5
6
7
8
buttonClass； 指定给上传按钮添加的类名
buttonCursor： 默认'hand'  , 指定光标形状， 'hand'或者'arrow'
buttonText： 指定按钮的文本内容
fileObjName： 指定上传的这个表单框的name属性，后端才能获取到。
fileSizeLimit： 指定文件大小限制
fileTypeExts：指定上传文件的后缀名。
itemTemplate: 指定上传时的html结构
formData: 指定文件上传时的form表单参数

更多参数，参考官方文档

常用事件

复制代码

1
2
onUploadSuccess: 上传成功时触发
onUploadError： 上传失败时触发。

代码示例

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$("#upfile").uploadify({
    auto: true,
    width: 70,
    height: 30,
    buttonClass:"btn btn-success btn-sm button_upfile",
    buttonText: "选择图片",
    fileTypeExts: '*.gif; *.jpg; *.png',
    swf: '/public/assets/uploadify/uploadify.swf',
    uploader: '/api/uploader/cover',
    fileObjName: "cs_cover_original",
    itemTemplate:"<span></span>",
    formData:{
       cs_id:cs_id
    },
    onUploadSuccess: function (file, data) {
       data = JSON.parse(data);     
       //设置图片
       $(".preview img").attr("src", data.result.path);
    }
});