jquery怎么添加图片与删除图片_IT百科

添加删除是一项基本功能，下面就来看一下jquery怎么在图片上添加删除按钮。

设备：联想电脑

系统：xp

软件：jQuery2019

1、首先写一个HTML架构，如图所示代码。

2、新建一个div，div中包裹着一个img标签，视为图片。

3、再次书写一个div，之后会赋予点击事件。

4、然后使用onclick函数进行点击时间的绑定，如图所示。

5、引入jquery.js，之后使用其中的函数。

6、最后编写addButton方法，这样一切就完成了。

给你重新写了一个，直接拷贝到记事本另存为html就可以调试(Jquery是在线引用的)。

以下代码在IE8和FF下测试通过。

另：程序如果有什么问题可以HI我。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>New Document </title>

//全局变量

var FileCount=0//上传文件总数

//添加上传文件按钮

function addFile(obj)

{

var filePath=$(obj).prev().val()

var FireFoxFileName=""

//FireFox文件的路径需要特殊处理

if(window.navigator.userAgent.indexOf("Firefox")!=-1)

{

FireFoxFileName=filePath

filePath=$(obj).prev()[0].files.item(0).getAsDataURL()

}

if(!checkFile(filePath,FireFoxFileName))

{

$(obj).prev().val("")

return

}

if(filePath.length==0)

{

alert("请选择上传文件")

return false

}

FileCount++

//添加上传按钮

var html='<span>'

html+='<input id="f'+FileCount+'" name="'+FileCount+'" type="file"/> '

html+='<input type="button" value="添加" onclick="addFile(this)"/>'

html+='</span>'

$("#fil").append(html)

//添加图片预览

html='<li>'

html+='<img id="img'+(FileCount-1)+'" src="'+filePath+'" width="100" height="100" style="cursor:pointer" alt="暂无预览" />'

html+='<br/>'

html+='<a href="#" name="img'+(FileCount-1)+'" onclick="DelImg(this)">删除</a>'

html+='</li>'

$("#ImgList").append(html)

}

//删除上传文件（file以及img）

function DelImg(obj)

{

var ID=$(obj).attr("name")

ID=ID.substr(3,ID.length-3)

$("#f"+ID).parent().remove()

$(obj).parent().remove()

return false

}

//检查上传文件是否重复,以及扩展名是否符合要求

function checkFile(fileName,FireFoxFileName)

{

var flag=true

$("#ImgList").find(":img").each(function(){

if(fileName==$(this).attr("src"))

{

flag=false

if(FireFoxFileName!='')

{

alert('上传文件中已经存在\''+FireFoxFileName+'\'!')

}

else

{

alert('上传文件中已经存在\''+fileName+'\'!')

}

return

}

})

//文件类型判断

var str="jpg|jpeg|bmp|gif"

var fileExtName=fileName.substring(fileName.indexOf(".")+1)//获取上传文件扩展名

if(FireFoxFileName!='')//fireFox单独处理

{

fileExtName=FireFoxFileName.substring(FireFoxFileName.indexOf(".")+1)

}

//alert(fileExtName)

if(str.indexOf(fileExtName.toLowerCase())==-1)

{

alert("只允许上传格式为jpg，jpeg，bmp，gif的文件。")

flag=false

}

return flag

}

</script>

.fil

{

width:300px

}

.fieldset_img

{

border:1px solid blue

width:550px

height:180px

text-align:left

}

.fieldset_img img

{

border:1px solid #ccc

padding:2px

margin-left:5px

}

#ImgList li

{

text-align:center

list-style:none

display:block

float:left

margin-left:5px

}

</style>

</head>

<body>

<p>上传预览图片:<br>

<span>

</span>

</div>

</p>

<!--li>

<br/>

</li-->

</ul>

</fieldset>

</div>

</body>

</html>

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

1、引入资源

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

2、Html

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

</div>

3、Javascript

创建Web Uploader实例

// 初始化Web Uploader

var uploader = WebUploader.create({

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

auto: true,

// swf文件路径

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

// 文件接收服务端。

server: 'http://webuploader.duapp.com/server/fileupload.php',

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

// 内部根据当前运行是创建，可能是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源码。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/bake/11672657.html

jquery怎么添加图片与删除图片

发表评论

评论列表（0条）