This time I will bring you a detailed explanation of the steps for uploading, previewing and deleting images with JQuery. What are the precautions for uploading and deleting images with JQuery? The following is a practical case, let’s take a look.
1. preview.2.0.html
<!DOCTYPE html>
<html>
<head>
<title>上传图片预览</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="srdz.preview.2.0.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="srdz.preview.2.0.js"></script>
<script type="text/javascript">
$(function(){
var p = new ImgPreview();
p.preview({previewid:"imgupload1"});
p.preview({previewid:"imgupload2"});
});
</script>
</head>
<body>
<p align="center" style="width: 50%;padding: 50px 300px;" id="imgupload1"></p>
<p align="center" style="width: 50%;padding: 50px 300px;" id="imgupload2"></p>
</body>
</html>2. srdz.preview.2.0.css
.btn-pic {
display: block;
position: relative;
width: 120px;
height: 40px;
overflow: hidden;
cursor: pointer;
text-align: center;
}
.btn-pic-bg {
border: 1px solid #ff9000;
background: none repeat scroll 0 0 #ff9000;
color: #ffffff;
text-decoration: none;
}
.btn-pic span {
display: block;
line-height: 39px;
}
.ipt-bg {
display: block;
position: absolute;
top: 0;
left: 0;
width: 120px;
height: 40px;
font-size: 100px;
opacity: 0;
filter: alpha(opacity=0);
}
.spanc{
color: red;
}
.drt {
float: right;
display: none;
}
.dft {
float: left;
}3. srdz.preview.2.0.js
function ImgPreview(){}
ImgPreview.prototype.preview=function(options){
var time = new Date().getTime();
var fileid = "file" + time;
var xdelid = "xdel" + time;
var delid = "del" + time;
var viewid = "view" + time;
var htm = "" +
"<p>" +
"<p class='dft'>" +
"<a class='btn-pic btn-pic-bg' href='javascript:void(0);'>" +
"<span>上传图片</span>" +
"<input id='" + fileid + "' type='file' name='file' class='ipt-bg' />" +
"</a>" +
"</p>" +
"<p id='" + xdelid + "' class='drt'>" +
"<a class='btn-pic btn-pic-bg' href='javascript:void(0)'>" +
"<span>删除图片</span>" +
"<input type='button' id='" + delid + "' class='ipt-bg'/>" +
"</a>" +
"</p>" +
"</p>" +
"<p id='" + viewid + "'></p>";
$("#" + options.previewid).html(htm);
$("#" + fileid).bind("click",function(){
var $this =$(this);
var browser={
isIE:function(ver){
var b = document.createElement('b');
b.innerHTML = '<!--[if IE ' + ver + ']><i></i><![endif]-->';
return b.getElementsByTagName('i').length === 1;
}
};
$this.change(function(){
var regex=/(.*)\.(jpg|jpeg|png)$/;
var val = $this.val();
if(!regex.test(val)){
$("#" + viewid).html("<span class='spanc'>请选择正确的图片（jpg、jpeg、png）!</span>");
return;
}
if(browser.isIE(6)){
HanderOther($this);
}else if(browser.isIE(7) || browser.isIE(8) || browser.isIE(9)){
HanderIE789($this);
}else if(window.FileReader){
HanderFileReader($this);
}else{
$("#" + viewid).html("<span class='spanc'>该浏览器不支持预览图片!</span>");
}
function HanderFileReader($this){
var oFReader = new window.FileReader(),
rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
oFReader.onload = function (oFREvent){
$("#" + viewid).html("<img src='"+oFREvent.target.result+"' style='width:100%;height:100%;'/>");
$("#" + xdelid).show();
};
var aFiles = $this.get(0).files;
if (aFiles.length == 0) { return; }
if (!rFilter.test(aFiles[0].type)) {
$("#" + viewid).html("<span class='spanc'>请选择正确的图片（jpg、jpeg、png）!</span>");
return;
}
oFReader.readAsDataURL(aFiles[0]);
}
function HanderIE789($this){
if(options.width != null && parseInt(options.width) > 0){
$("#" + viewid).css("width",options.width + "px");
}else{
$("#" + viewid).css("width","378px");
}
if(options.height != null && parseInt(options.height) > 0){
$("#" + viewid).css("height",options.height + "px");
}else{
$("#" + viewid).css("height","358px");
}
$("#" + viewid).css("filter","progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='"+GetImgSrc($this)+"')");
$("#" + xdelid).show();
}
function HanderOther($this){
$("#" + viewid).html("<img src='"+$this.val()+"' style='width:100%;height:100%;'/>");
$("#" + xdelid).show();
}
function GetImgSrc($this){
$this.select();
$this.blur();
var imgSrc =document.selection.createRange().text;
document.selection.empty();
return imgSrc;
}
});
});//绑定按钮事件
$("#" + delid).bind("click",function(){
var browser={
isIE:function(ver){
var b = document.createElement('b');
b.innerHTML = '<!--[if IE ' + ver + ']><i></i><![endif]-->';
return b.getElementsByTagName('i').length === 1;
}
};
if(browser.isIE(7) || browser.isIE(8) || browser.isIE(9)){
$("#" + fileid).val('');
$("#" + viewid).css("filter","");
$("#" + viewid).css("width","");
$("#" + viewid).css("height","");
$("#" + xdelid).hide();
}else{
$("#" + fileid).val('');
$("#" + viewid).empty();
$("#" + xdelid).hide();
}
});
};Uploadify implements display of progress bar to upload pictures
##How to deal with garbled Chinese characters when passing url in jquery.ajaxThe above is the detailed content of Detailed explanation of image upload preview and deletion steps with JQuery. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
