Dieses Mal erkläre ich Ihnen ausführlich die Schritte zum Hochladen, Anzeigen der Vorschau und Löschen von Bildern mit JQuery. Was sind die Vorsichtsmaßnahmen zum Hochladen, Anzeigen der Vorschau und Löschen von Bildern mit JQuery? , lass uns einen Blick darauf werfen.
1. Vorschau.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();
}
});
};Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf PHP Chinesische Website!
Empfohlene Lektüre:
Uploadify implementiert die Anzeige des Fortschrittsbalkens zum Hochladen von Bildern
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Hochladen von Bildern in der Vorschau und zum Löschen mit JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
