Home > Article > Web Front-end > Detailed explanation of image upload preview and deletion steps with JQuery
Detailed explanation of image upload preview and deletion steps with JQuery
- php中世界最好的语言Original
- 2018-04-26 11:28:252928browse
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();
}
});
}; I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website! Recommended reading:
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!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn