关于文件上传的基本演示

关于文件上传的基本说明

第一步：导入js和样式以及字体 
           <link href="css/iconfont.css" rel="stylesheet" type="text/css"/>

            <link href="css/fileUpload.css" rel="stylesheet" type="text/css">

            <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>

            <script type="text/javascript" src="js/fileUpload.js"></script>
第二步：初始化上传组件 
            //创建这个对象并且将容器的ID传入
            let wfu = new WpFileUpload("fileUploadContent");

            //初始化参数，注意：格式为json格式，如果不做设置，请填写：{}
             wfu.initUpload({
                "uploadUrl":"#",//上传文件信息地址
                "progressUrl":"#",//获取进度信息地址
                "scheduleStandard":true,
                "showSummerProgress":true,
                "showFileItemProgress":true,
                "autoCommit":false,
                "showProgressNum":false,
                "ismultiple":true,
                .................................
            });

关于文件上传的参数说明

属性 默认 是否必需 功能
uploadUrl # 是 上传地址，后台提供的借口，用来接受前台文件的地址
progressUrl # 否 获取上传进度信息的url，注意需要返回的data格式如下（{bytesRead: 102516060, contentLength: 102516060, items: 1, percent: 100, startTime: 1489223136317, useTime: 2767}）
scheduleStandard false 否 是否进行模拟上传，false：不进行模拟，进行真实上传，true：进行模拟上传
selfUploadBtId 否 自定义文件上传按钮id
rememberUpload false 否 是否记住已经上传过的文件，如果是记住，那么下次在上传的时候将不会允许，注意：当浏览器刷新的时候，这个设置将无效
autoCommit false 否 是否自动上传
isHiddenUploadBt false 否 是否隐藏上传按钮
isHiddenCleanBt false 否 是否隐藏清除按钮
isAutoClean false 否 上传完成后是否自动清除
canDrag true 否 是否可以拖动
fileType * 否 文件类型限制，默认不限制，注意写的是文件后缀，如：['png','jpg','docx','doc']
size -1 否 文件大小限制,单位kB，默认不限制
totalSize -1 否 每次上传文件总大小，不是单个文件是所有文件的总和
maxFileNumber -1 否 每次上传文件的总个数限制
ismultiple true 否 是否可以多选
showSummerProgress true 否 是否显示总进度条，默认显示
showFileItemProgress true 否 是否显示单文件进度条，默认显示
showProgressNum false 否 是否显示进度条的值
uploadFileParam files 否 上传文件数据的参数
uploadFileParamIteration false 否 要上传的文件参数是否迭代，如果true：files0，files1，files2...... ， 如果是false：所有的文件通过一个参数uploadFileParam所设定的值（默认：files）来上传文件
resultData null 否 上传成功后返回的信息将会存在该参数下
beforeUpload 否 在真正上传前面执行的函数,如：
                    beforeUpload:beforeUploadFun,
                    ..........
                     function beforeUploadFun(){
                        // 真正上传前你要执行的操作
                    }
onUpload 否 在上传后执行的函数,如：
                        onUpload:onUploadFun,
                        ..........
                        function onUploadFun(){
                            // 上传之后执行的函数
                        }

WpFileUpload几个重要的函数

1、上传状态显示:
（1）上传失败：
wfu.uploadError();
（2）上传成功：
wfu.uploadSuccess();
2、删除回显的文件:
wfu.removeShowFileItem(fileId); // fileId指文件的Id
3、上传成功后回显文件:
wfu.showFileResult(fileUrl,fileId,defineFileName,deleteFile,downloadFile,deleteEvent,downLoadEvent)
fileUrl:文件地址
fileId:文件Id
defineFileName:自定义文件名，注意带后缀
deleteFile:是否可删除文件
downloadFile:是否可下载文件
deleteEvent:删除文件事件 ，注意，返回只有一个数据：文件的ID（fileId）
downLoadEvent:下载文件事件，注意，返回有两个数据：文件的ID（fileId）和文件的地址（fileUrl）
 4、获取表单数据:

(1)、获取普通表单数据
var formData = wfu.getFormData("表单的Id")
如：{"name":"zxm","age":"25","sex":"male"}
(2)、获取上传文件格式的表单数据
var formData = wfu.getFormDataOfUploadFile("表单的Id")
如：[{"name":"name","value":"zxm"},{"name":"age","value":"26"},{"name":"sex","value":"male"}];

演示：
姓名：
年龄：
性别：男女
描述：
5、上传文件:
wfu.upload();

关于上传注意事项：

1、可以同时关闭主进度条和文件进度条

2、如果没有进度信息，设置scheduleStandard:false,progressUrl:#,默认会上传到60%，然后根据后台返回的结果进行设置成功还是失败

3、如果是PHP开发，请使用上文文件参数迭代：files0，files1，files2，.........