uploadify文件上传插件使用教程

uploadify插件

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

官网

官方文档

使用步骤

• html结构

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

• 引入文件

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

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

• 使用插件

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

• 常用参数解释

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

更多参数，参考官方文档

• 常用事件

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

• 代码示例

$("#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);
    }
});