jquery图片查看,jquery图片查看插件

我需要一个js或者jquery能批量上传图片+预览的功能。急~~~急~~~急~~

Web Uploader 项目，符合你的要求。

创新互联主营文昌网站建设的网络公司,主营网站建设方案,App定制开发,文昌h5微信小程序定制开发搭建,文昌网站营销推广欢迎文昌等地区企业咨询

1、引入资源

使用Web Uploader文件上传需要引入三种资源：JS, CSS, SWF。

!--引入CSS--

link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css"

!--引入JS--

script type="text/javascript" src="webuploader文件夹/webuploader.js"/script

!--SWF在初始化的时候指定，在后面将展示--

2、Html

首先需要准备一个按钮，和一个用来存放添加的文件信息列表的容器。

!--dom结构部分--

div id="uploader-demo"

!--用来存放item--

div id="fileList" class="uploader-list"/div

div id="filePicker"选择图片/div

/div

3、Javascript

创建Web Uploader实例

// 初始化Web Uploader

var uploader = WebUploader.create({

// 选完文件后，是否自动上传。

auto: true,

// swf文件路径

swf: BASE_URL + '/js/Uploader.swf',

// 文件接收服务端。

server: '',

// 选择文件的按钮。可选。

// 内部根据当前运行是创建，可能是input元素，也可能是flash.

pick: '#filePicker',

// 只允许选择图片文件。

accept: {

title: 'Images',

extensions: 'gif,jpg,jpeg,bmp,png',

mimeTypes: 'image/*'

}

});

监听fileQueued事件，通过uploader.makeThumb来创建图片预览图。

PS: 这里得到的是Data URL数据，IE6、IE7不支持直接预览。可以借助FLASH或者服务端来完成预览。

// 当有文件添加进来的时候

uploader.on( 'fileQueued', function( file ) {

var $li = $(

'div id="' + file.id + '" class="file-item thumbnail"' +

'img' +

'div class="info"' + file.name + '/div' +

'/div'

),

$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 );

}, thumbnailWidth, thumbnailHeight );

});

然后剩下的就是上传状态提示了，当文件上传过程中, 上传成功，上传失败，上传完成都分别对应uploadProgress, uploadSuccess, uploadError, uploadComplete事件。

// 文件上传过程中创建进度条实时显示。

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 ) {

$( '#'+file.id ).addClass('upload-state-done');

});

// 文件上传失败，显示上传出错。

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();

});

更多细节，请查看js源码。

jquery ajax拿到图片后如何填充到轮播上

首先你的轮播是用的第三方或者插件，查看API 有没类似setData方面的API 有直接调用

没有直接append到HTML上去 初始化

自己编写的 append到HTML上去 调用初始化方法

jquery如何改变img的图片路径

可以使用jQuery的“attr”方法改变img的图片路径。

1、新建html文档，在body标签中添加img标签，设置图片的路径为“a.png”，然后引入文件：

2、为img标签添加id“demo”，然后添加脚本代码“$("#demo").attr("src", "b.png");”，代码的意思先获取img标签，然后将路径改为“b.png”：

3、用浏览器打开网页，按F12键打开网页源码，可以查看img路径已经从“a.png”换成“b.png”了：

前端用jQuery怎么获取到富文本ueditor web编辑器里面的文字,图片内容

UE.getPlainTxt() 可获取到编辑器中的纯文本内容，有段落格式

UE.getContentTxt() 可获取到编辑器中的纯文本内容，没有段落格式；

ueditor 没有提供直接获取图片的功能，可以UE.getContent() 获取全部内容，使用正则表达式 筛选出图片，我提供一个使用JAVA写的筛选方法，前台js代码类似:

Pattern p_img = Pattern.compile("(img[^]+src\\s*=\\s*['\"]([^'\"]+)['\"][^]*)");

Matcher m_img = p_img.matcher(content);

while (m_img.find()) {

String img = m_img.group(1); //m_img.group(1) 为获得整个img标签  m_img.group(2) 为获得src的值

}

可以打开ueditor.all.min.js 查看，里面有所有支持的方法  注释也都很明白

jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)

本文实例讲述了jQuery图片旋转插件jQueryRotate.js用法。分享给大家供大家参考，具体如下：

推荐一个图片旋转插件，用于浏览相册时，旋转图片。

运行效果截图如下：

点击此处查看在线演示效果。

具体代码如下：

script

type="text/javascript"

$(document).ready(function

()

{

$("#images").rotate(45);

var

value

=

$("#images1").rotate({

bind:

{

mouseover:

function(){

value

+=90;

$(this).rotate({

animateTo:value})

}

}

});

$('#button').click(function(){

$("#images1").rotate({animateTo:parseInt($('#angel').val())});

});

function

rotation

(){

$("#images2").rotate({

angle:0,

animateTo:360,

callback:

rotation,

easing:

function

(x,t,b,c,d){

return

c*(t/d)+b;

}

});

}

rotation();

});

/script

上面只是js代码，完整实例代码点击此处本站下载。

更多关于jQuery插件相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery插件viewer查看图片时候会弹出图片，如何控制图片弹出显示大小。

你说的是后面整个半透明的背景吧，这个无法控制，这部分是整个容器的背景，容器是绝对定位，如果修改了容器，那么图片就无法定位了，折中的办法就是取消容器背景色，给图片添加阴影，达到期望的效果。

.viewer-container{background-color: transparent;}

.viewer-canvasimg {box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.5);

否则只能修改插件源代码