<span style="font-family: Arial, Helvetica, sans-serif;"><div class="floor-popAd clearfix"></span>
<span class="span-popLeft"><span class="s-red">*</span>图片:</span> <div class="fl"> <div class="s-lightGray posra clearfix"> <div id="filePicker" class="fl">本地上传</div> <p class="fl" style="line-height:30px;">图片支持JPG,GIF格式,不超过2M</p> </div> <div class=" clearfix uploader-list" id="fileList"> </div> </div> </div>
<pre name="code" class="javascript"> var $list = $("#fileList"); // 初始化Web Uploader var uploader = WebUploader.create({ // 设置文件上传域的name fileVal:"fileupload", // 不压缩image resize: false, // 选完文件后,是否自动上传。 auto: true, //验证文件总数量, 超出则不允许加入队列 fileNumLimit:3, //验证文件总大小是否超出限制, 超出则不允许加入队列。 //fileSizeLimit:1024, //验证单个文件大小是否超出限制, 超出则不允许加入队列。 // fileSingleSizeLimit :1024, // swf文件路径 swf: '${ctx}/cy/js/lib/Uploader.swf', // 文件接收服务端。 server: '${ctx}/advert/aptituImgUpload.html', // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: '#filePicker', // 只允许选择图片文件。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } }); // 当有文件添加进来的时候 uploader.on( 'fileQueued', function( file ) { var $li = $('<div id="' + file.id + '" class="file-item thumbnail">'+'<input type="hidden" name="adImageUrl" id="adImageUrl' + file.id + '"/>' +'<img>' +'<div class="info">' + file.name + '</div>' +'<div class="remove-this">×</div>' +'</div>'); var $img = $li.find('img'); // $list为容器jQuery实例 $list.append( $li ); // 创建缩略图 // 如果为非图片文件,可以不用调用此方法。 // thumbnailWidth x thumbnailHeight 为 100 x 100 uploader.makeThumb( file, function( error, src ) { if ( error ) { $img.replaceWith('<span>不能预览</span>'); return; } $img.attr( 'src', src ); }, 100, 100 ); // 删除图片 $list.off("click.removeFile"); $list.on("click.removeFile",'.remove-this',function(ev){ ev.preventDefault(); uploader.removeFile(file); $(this).parent().remove(); }); }); // 文件上传过程中创建进度条实时显示。 uploader.on( 'uploadProgress', function( file, percentage ) { var $li = $( '#'+file.id ), $percent = $li.find('.progress span'); // 避免重复创建 if ( !$percent.length ) { $percent = $('<p class="progress"><span></span></p>') .appendTo( $li ) .find('span'); } $percent.css( 'width', percentage * 100 + '%' ); }); // 文件上传成功,给item添加成功class, 用样式标记上传成功。 uploader.on( 'uploadSuccess', function( file,obj ) { $( '#'+file.id ).addClass('upload-state-done'); $( '#'+file.id ).append(); if(obj.code==1){ $("#adImageUrl"+file.id).val(obj.msg);//保存服务端返回图片地址 } }); //当所有文件上传结束时触发。 根据文本框ID删除父级容器。 uploader.on( 'uploadFinished', function( file ) { var m = document.getElementsByName("adImageUrl"); if(m.length > 3){ var obj = m[3]; $( '#'+obj.id ).parent().remove(); } }); // 文件上传失败,显示上传出错。 uploader.on( 'uploadError', function( file ) { var $li = $( '#'+file.id ), $error = $li.find('div.error'); // 避免重复创建 if ( !$error.length ) { $error = $('<div class="error"></div>').appendTo( $li ); } $error.text('上传失败'); }); // 完成上传完了,成功或者失败,先删除进度条。 uploader.on( 'uploadComplete', function( file ) { $( '#'+file.id ).find('.progress').remove(); }); //执行删除方法 $list.on("click", ".remove-this",function(){ $(this).parent().remove(); }); /** * 初始化图片 */ function initImageView(obj){ var str=''; for(var i=0;i<obj.length;i++){ str += '<div id="previewImage_' + i + '" class="file-item thumbnail">'+'<input type="hidden" name="adImageUrl" value='+ obj[i] +' id="adImageUrl' + i + '"/>' +'<img src="http://qa-pic.xebest.com'+obj[i]+'" width="100" height="100">' +'<div class="info"></div>' +'<div class="remove-this">×</div>' +'</div>'; } $list.html( str ); // $list为容器jQuery实例 } /** * 弹出对话框方法 * @param hid * @param ad */ function myMask() { var _adImageUrl = $(obj).attr("adImageUrl");//图片地址 var arr = _adImageUrl.split(","); if(arr.length>0 && arr[0]!=""){ initImageView(arr);//初始化图片 } }
时间: 2024-10-09 03:41:42