浙江爱信诺前端规范

组件 - 文件上传

使用说明

                            
                            <input type="file" name="file" />
                            
                            
                            <script type="text/javascript" src="jquery.js"></script>
                            <script type="text/javascript" src="jquery.upload.js"></script>
                            
                            
                            <script type="text/javascript">
                            $('[name="file"]').upload({配置参数});
                            </script>
                            

后台响应的Content-type值必须为text/html，若果为application/json则在IE下面返回的json会作为文件下载

使用实例

上传图片

                            <div class="m-upload">
                                <span>
                                    <input type="file" name="file" />
                                    <em>上传文件</em>
                                </span>
                                <p></p>
                            </div>
                            

                            $('[name="file"]').upload({
                                url:'http://192.168.1.109/haoju/test/upload.php',
                                start:function(file){
                                    var val = file.val().toLowerCase();
                                    if(!/\.(gif|jpg|jpeg|png|pdf)$/.test(val)){
                                        $.layer.alert('
上传文件格式仅支持gif/jpg/jpeg/png/pdf，并且文件大小不超过80M
', '', 280);
                                        return false;
                                    }
                                    else if(/\.pdf$/.test(val) && !tools.isPDFInstalled()){
                                        $.layer.alert('
查看PDF文件需要安装PDF阅读器，请先下载！
', '', 280);
                                        return false;
                                    }
                                    return true;
                                },
                                speed:100,
                                send:function(scale, file, res){
                                    var bar = file.closest('div').find('div').show();
                                    bar.find('b').stop(true, false).animate({'width':scale+'%'}, function(){
                                        if(scale === 100){
                                            bar.hide().find('b').css({width:0}).end().find('s').text('');
                                            if(res){
                                                if(res.result === 'success'){
                                                    var html = '';
                                                    var url = 'http://192.168.1.109/haoju/data/images/xhupfiles/'+ res.url;
                                                    if(/\.pdf$/.test(res.url)){
                                                        html = '';
                                                    }
                                                    else{
                                                        html = '';
                                                    }
                                                    $('.m-upload p').append(html);
                                                }
                                                else{
                                                    $.layer.alert('
'+ res.message +'
', '', 280);
                                                }
                                            }
                                            else{
                                                $.layer.alert('
超时或者返回值有误！
', '', 280);
                                            }
                                        }
                                    }).end().find('s').text(scale+'%');
                                }
                            });
                            

API

普通属性	值类型	默认值	可填值	功能说明
url	String	''	url字符串	文件上传url路径
timeout	Number	25000	正整数	最大加载时间，单位/毫秒，若超过该时间会调用error回调
button	Null | jQuery Selector	null	jQuery对象或者空	按钮点击上传
dataType	String	json	json | text	上传接口返回值类型

普通方法	参数	默认值	功能说明
start	file	调用组件的file jQuery对象	文件选择后执行回调函数，可做类型验证，return true继续执行上传
success	response	响应数据	上传成功回调函数
	file	调用组件的file jQuery对象
error	file	调用组件的file jQuery对象	上传成功回调函数，超时或者返回值类型错误会调用该函数

下载

jquery.upload.js

版本更新