Front page upload preview call upload Service

function Openbrowse () {
var ie=navigator.appname== "Microsoft Internet Explorer"? True:false;
if (IE) {
document.getElementById ("File"). Click ();
document.getElementById ("filename"). Value=document.getelementbyid ("file"). Value;
}else{
var a=document.createevent ("Mouseevents");
A.initevent ("Click", True, true);
document.getElementById ("file"). Dispatchevent (a);
}
}

function Setimagepreview () {
if ($ (' div[id= ' Localimag "]). Length>5) {
Alert ("Up to 5 images can be uploaded!");
Return
}
var uploadsrc = "";
$.ajaxfileupload ({
Async:false,
URL: "${ctx}/xxxx/xxx/xxx",
Secureuri:false,
Fileelementid: [' file '],
DataType: ' Text ',
Success:function (data) {
UPLOADSRC = $ (data). text ();
if (uploadsrc = = "| | uploadsrc.indexof (" error ") >-1) {
$ (' #pic '). Show ();
$ (' #nameImage '). Val (');
$ (' #preview '). attr (' src ', uploadsrc);
$ ("#preview"). CSS (' Display ', ' none ');
$ ("#localImag"). CSS (' Display ', ' none ');

$ (' #cancelButton '). Hide ();
return true;
}else{
$ (' #pic '). Hide ();
$ ("#preview"). CSS (' Display ', ' block ');
$ ("#localImag"). CSS (' Display ', ' block ');
$ (' #cancelButton '). Show ();
}

var docobj = document.getElementById ("file");
var Imgobjpreview = document.getElementById ("preview");
if (Docobj.files && docobj.files[0]) {
Under Firefox, set the IMG property directly
ImgObjPreview.style.display = ' block ';
ImgObjPreview.style.width = ' 200px ';
ImgObjPreview.style.height = ' 150px ';
IMGOBJPREVIEW.SRC = Docobj.files[0].getasdataurl ();
Firefox 7 or above can not be used in the above Getasdataurl () way to get, need a way
imgobjpreview.src = window. Url.createobjecturl (Docobj.files[0]);

} else {

Under IE, use filters
Docobj.select ();
var imgsrc = uploadsrc;
var localimagid = document.getElementById ("Localimag");
Initial size must be set
LocalImagId.style.width = "200px";
LocalImagId.style.height = "150px";

Image exception capture to prevent users from modifying the suffix to forge a picture
try {

$ (Localimagid). Find (' #preview '). attr (' src ', imgsrc);
$ (' p[name= ' Notshow "]). Hide ();
$ (' P '). Append (Localimagid);
$ (Localimagid). Append (' <input type= "hidden" name= "Picurl" id= "Picurl"/> ");
$ (Localimagid). Find (' #picUrl '). attr (' value ', imgsrc);
$ (' input[id= ' Nameimage "]). attr (' value ', ');
$ ("#preview"). CSS (' Display ', ' block ');
} catch (e) {
Alert ("The image you uploaded is not in the correct format, please select it again!");
return false;
}
}

$ ("#nameImage"). Val (UPLOADSRC);
$ (' #nameImage '). attr ("ReadOnly", "ReadOnly")//Set INPUT element to ReadOnly
},
Error:function (data) {
alert (data);
}
});
return true;
}

================================================

<input type=file name= "fileUpload" id= "file" onchange= "Javascript:setimagepreview (this);" Style= "Display:none" >

<li><label> Awards &nbsp; Products &nbsp;&nbsp; Figure:</label>
<form:input id= "Nameimage" name= "Nameimage" path= "Picurl" htmlescape= "false" Maxlength= "$" readonly= "true" class = "Required"/>
<label id= "pic" for= "pic" class= "error" style= "Diplay:none" > Picture type must be. Gif,jpeg,jpg,bmp one of the </label>
<input type= "button" name= "button" style= "margin-bottom:0px; onclick=" Javascript:openbrowse (this); "value=" Upload picture "/>
<!--<input type= "button" id= "CancelButton" name= "button" style= "Margin-bottom:0px;diplay:none" onclick= " Javascript:cancelbrowse (); "value=" Cancel Upload "/>"--
<span class= "Help-inline" ><font color= "Red" >*</font> </span>
<p style= "Diplay:none" name= "notshow" ><div id= "Localimag" class= "localimags" ><div class= ' Clo ' OnClick = ' Javascript:checkclose (this); ' ></div></div></p></li>

Front page upload preview call upload Service