Home > Developer > JavaScript
This article mainly through the Code analysis JavaScript implementation Picture upload foreground page, nonsense said, directly affixed to the code.
code example one:
<script>/Check that the picture is in the correct format while implementing preview function Setimagepreview (obj, Localimagid, Imgobjpreview) {var array = new Ar Ray (' gif ', ' jpeg ', ' png ', ' jpg ', ' bmp ');
Can upload the file type if (Obj.value = = "") {$.messager.alert ("hint", "let select the picture to upload!");
Flag = false;
return false; else {var filecontenttype = Obj.value.match (/^ (. *) (\.) (. {1,8}) $/) [3];
This file type is very useful////Boolean variable var isexists = false;
var objvalue = Obj.value;
try {//for IE to judge the size of the file to be uploaded var fso = new ActiveXObject ("Scripting.FileSystemObject");
Filelenth = parseint (Fso.getfile (objvalue). Size);
catch (e) {try {///= Filelenth = parseint (obj.files[0].size) for non ie get the size of the file to be uploaded;
catch (e) {flag = false;
return false; }//loop to determine if the picture is in the correct format for (var i in array) {if (filecontenttype.tolowercase () = Array[i].tolowercase ())
{////Picture format is correct, depending on the browser to set the size of the picture if (Obj.files && obj.files[0]) {//Firefox, directly set the IMG properties ImgObjPreview.style.display = ' block ';
ImgObjPreview.style.width = ' 180px ';
ImgObjPreview.style.height = ' 200px '; Firefox 7 version can not be used above the Getasdataurl () way to obtain, need a way imgobjpreview.src = window.
Url.createobjecturl (Obj.files[0]);
if (Filelenth > 102400) {$.messager.alert ("hint", "Please select a picture less than 100k!");
Flag = false;
return false;
If {//ie, use filter obj.select ();
var imgsrc = Document.selection.createRange (). text;
The initial size must be set localImagId.style.width = "180px";
LocalImagId.style.height = "200px"; The capture of the image exception prevents the user from modifying the suffix to forge the picture try {localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoad
ER (sizingmethod=scale) ";
LocalImagId.filters.item ("DXImageTransform.Microsoft.AlphaImageLoader"). src = imgsrc;
catch (E) {$.messager.alert ("hint", "the picture you uploaded is not in the correct format, please choose again!");
Flag = false;
return false;
}ImgObjPreview.style.display = ' None ';
Document.selection.empty ();
} isexists = true;
Flag = true;
return true;
} if (Isexists = False) {$.messager.alert ("hint", "Upload picture type is incorrect!");
Flag = false;
return false;
} flag = false;
return false; } </script> <tr class= "Detailinfo" > <td align= "right" > Upload photos: </td> <td Align= "Left" > <input type= "file" id= "Idfile" name= "Idfile" width= "150px" runat= "Server" onchange= "javascript: Setimagepreview (This,localimag,preview); "/> </td> </tr> <tr class=" Detailinfo "> <t D align= "Right" > Preview: </td> <td> <div id= "Localimag" > </div> </td> </tr>
code example two:
<!doctype html>
When clicked Select Picture to load this JS. Then copy imagedialog, look it up in image.js, and you'll find something like that inside. At this point should understand, upload_json.jsp set url,title,width,height,order,align, the foreground can be used.
The above is this article to the JavaScript realization picture uploads the front page the entire content, hoped everybody likes.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
