决定像罗胖一样,坚持转发他的60“语音, 看我能不能一样坚持下来!

onethink 图片上传safari无反应更换webuploader

onethink eagle 21506℃ 0评论

1. onethink后台上传图片,safari升级新系统后,点了没有反应, 不过安装safari开发版本可以用

2. 修改一下, 换成webuploader, 我们先在 edit模板页里面进行改动

去下载webupader,按下面的路径,把它放到onethink的相应目录能引入对就行了

<!–webuploader 上传组件引用CSS–>
    <link rel="stylesheet" type="text/css" href="__STATIC__/webuploader/webuploader.css">
    <script type="text/javascript" src="__STATIC__/webuploader/webuploader.js"></script>
    <!–webuploader 引入JS–>
     <script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>

这部份是上传后的相片可以预览
     <link rel="stylesheet" href="__STATIC__/viewerjs/css/viewer.min.css">
     <script src="__STATIC__/viewerjs/js/viewer-jquery.min.js"></script>

3. 在case里添加模板

 

选择图片

[code]
                                     // 图片上传demo
                                    jQuery(function() {
                                        var $ = jQuery,
                                            $list = $('#fileList_{$field.name}'),
                                            // 优化retina, 在retina下这个值是2
                                            ratio = window.devicePixelRatio || 1,
                                             // 缩略图大小
                                            thumbnailWidth = 100 * ratio,
                                            thumbnailHeight = 100 * ratio,
                                             // Web Uploader实例
                                            uploader;</p>
<p>                                        // 初始化Web Uploader
                                        uploader = WebUploader.create({
                                             // 自动上传。
                                            auto: true,
                                             // swf文件路径
                                            swf:  '__STATIC__/webuploader/Uploader.swf',
                                             // 文件接收服务端。
                                            server: "{:U('File/uploadPicture',array('session_id'=>session_id()))}",
                                            //上传域的名字,这个自已server 处理端,要求用个名字,要不会返回不到值
                                            fileVal:'download',
                                            // 选择文件的按钮。可选。
                                            // 内部根据当前运行是创建,可能是input元素,也可能是flash.
                                            pick: '#filePicker_{$field.name}',
                                            //上传文件数量限制
                                            //fileNumLimit:1,
                                            // 只允许选择文件,可选。
                                            accept: {
                                                title: 'Images',
                                                extensions: 'gif,jpg,jpeg,bmp,png',
                                                mimeTypes: 'image/*'
                                            }
                                        });
                                         // 当有文件添加进来的时候
                                        uploader.on( 'fileQueued', function( file ) {
                                            var $li = $(
                                                    '</p>
<div id="' + file.id + '" class="file-item thumbnail">' +
                                                        '<img data-src="">' +
                                                       // '</p>
<div class="info">' + file.name + '</div>
<p>' +
                                                    '</p></div>
<p>'
                                                    ),
                                            $img = $li.find('img');
                                            $list.html('');    //只可以上传一个图片, 所以清除一下信息
                                            $list.append( $li );</p>
<p>                                            // 创建缩略图
                                            uploader.makeThumb( file, function( error, src ) {
                                                if ( error ) {
                                                    $img.replaceWith('<span>不能预览</span>');
                                                    return;
                                                }
                                                 $img.attr( 'src', src );
                                            }, thumbnailWidth, thumbnailHeight );
                                        });</p>
<p>                                        // 文件上传过程中创建进度条实时显示。
                                        uploader.on( 'uploadProgress', function( file, percentage ) {
                                            var $li = $( '#'+file.id ),
                                                $percent = $li.find('.progress span');</p>
<p>                                            // 避免重复创建
                                            if ( !$percent.length ) {
                                                $percent = $('</p>
<p class="progress"><span></span></p>
<p>').appendTo( $li ).find('span');
                                            }</p>
<p>                                            $percent.css( 'width', percentage * 100 + '%' );
                                        });</p>
<p>                                        // 文件上传成功,给item添加成功class, 用样式标记上传成功。
                                        uploader.on( 'uploadSuccess', function( file ,data) {
                                           // console.log(file);
                                            $( '#'+file.id ).addClass('upload-state-done');
                                              //表单存储id的值
                                            $("#photos_id_{$field.name}").val(data.id);
                                            $("#photos_id_{$field.name}_name").val(data.name);
                                            $("#fileList_{$field.name}").find('img').attr('data-src', data.path);
                                        });
                                        uploader.on('uploadAccept',function(file,ret){
                                             //console.log(file);
                                         }),
                                        // 文件上传失败,现实上传出错。
                                        uploader.on( 'uploadError', function( file ) {
                                            var $li = $( '#'+file.id ),
                                                $error = $li.find('div.error');
                                             // 避免重复创建
                                            if ( !$error.length ) {
                                                $error = $('</p>
<div class="error"></div>
<p>').appendTo( $li );
                                            }
                                             $error.text('上传失败');
                                        });</p>
<p>                                        // 完成上传完了,成功或者失败,先删除进度条。
                                        uploader.on( 'uploadComplete', function( file) {
                                               // console.log(file);
                                             $( '#'+file.id ).find('.progress').remove();
                                        });
                                        //图片预览
                                        $('#fileList_{$field.name} img').viewer();
                                     });
                                  </script> [/code]

 

 

 

转载请注明:艾依小站 » onethink 图片上传safari无反应更换webuploader

喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址