Home > Web Front-end > JS Tutorial > body text

Uploaded images, image size verification, image preview effect code based on jquery_jquery

WBOY
Release: 2016-05-16 18:07:51
Original
1143 people have browsed it

jquery implements uploaded images and image size verification, image preview effect code
Uploaded image verification

Copy code The code is as follows:

*/
function submit_upload_picture(){
var file = $('file_c').value;
if(!/.(gif|jpg |jpeg|png|gif|jpg|png)$/.test(file)){
alert("The picture type must be one of .gif, jpeg, jpg, png")
}else{
$('both_form').action="file!upload.action";
$('both_form').submit();
$('insert_img').sethtml('');
$('display_div').setstyle('display', 'block');
$ ('upload_div').setstyle('display', 'none');
}
}

Verification of image type and size
Copy code The code is as follows:

//Example 2
function validate_edit_logo(a){
var file = $('file').value;
if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){
alert(" The image type must be one of .gif, jpeg, jpg, png")
if(a==1){
return false;
}
}else{
var image = new image();
image.src = file;
var height = image.height;
var width = image.width;
var filesize = image.filesize;
$( 'beforeend').src=file;
$('div_regi_right').setstyle('display', 'block');
if(width>80 && height>80 && filesize>102400){
alert('Please upload an image of 80*80 pixels or less than 100k');
if(a==1){
return false;
}
}
if(a ==1){
return true;
}
}
}

Picture preview
Copy code The code is as follows:

//Example 3
function viewimg(index) {
var name = 'uploadimg' index;
var imgup = $(name);
var imgpath = getpath(imgup);
var local = imgup.value;
var point = local.lastindexof(".");
//Determine the size of the uploaded file
var img = document.createelement("img");
img.src = local;
var filesize = img.filesize;
img.onload = function (){filesize=this.filesize;}
if(img.filesize>5242880){
alert("The image file is too large! ");
return false;
}
//Determine whether it is an image format
var imgname = imgup.value.substring(imgup.value.lastindexof("."), imgup.value. length);
imgname = imgname.tolowercase();
if ((imgname != ".jpg") && (imgname != ".gif") && (imgname != ".jpeg") && ( imgname != ".png") && (imgname != ".bmp")) {
alert("u8bf7u9009u62e9u56feu7247u6587u4ef6uff0cu8c22u8c22!");
imgup.focus();
//Clear the value in file www.3ppt.com
imgup.select();
document.selection.clear();
} else {
//Display image
document.getelementbyid("sig_preview" index) .innerhtml = "";
}
if (index >=3){
var cnt = index 1;
$("img" cnt).style. display = "";
}
}
Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template