JQuery uses Ajax to upload files for online photo cropping examples

Step 1: introduce necessary css and js on the page (the download address is provided at the end of this article for learning and use ):

The code is as follows:

Copy code

<Link rel = "stylesheet" type = "text/css" href = "css/open_platform.css"/> <Link rel = "stylesheet" type = "text/css" href = "css/open_qq_agreement.css"/> <Link rel = "stylesheet" type = "text/css" href = "css/confirm_by_dialog.css"/> <Link rel = "stylesheet" type = "text/css" href = "css/smoothness/jquery-ui-1.9.0.custom.min.css"/> <Script type = "text/javascript" src = "js/jquery. js"> </script> <Script type = "text/javascript" src = "js/jquery-ui-1.9.0.custom.min.js"> </script> <Script type = "text/javascript" src = "js/qzfl_for_qzone.js"> </script> <Script type = "text/javascript" src = "js/open_v2.js"> </script> <Script type = "text/javascript" src = "js/fileupload. js"> </script>

Step 2: write html code, an upload button, and a preview

<Div class = "div_btn img_upload_panel">
<Input type = "hidden" name = "face_path" value = ""/>
<P class = "pic">

</P>
<Div class = "clear"> </div>
<Br/>
<P> <input type = "button" value = "upload image" class = "file_icon_upload_btn"/> </p>
<Br/>
</Div>
Step 3: bind an upload event to the upload button

<Script type = "text/javascript">
$ (Document). ready (function (){
// Icon Upload
$ (". File_icon_upload_btn"). click (function (){
Var post_url = "uploadify. json? Type = icon ",
Desc = "select a 255x255 image with a size of less than 1 MB. png/jpg format ",
Pf_id = 1, _ flag = "255_255", _ size = 1024*1024;
Var _ this = $ (this );
OP_COMMON.upload.showUpload (post_url,
Function (ret ){
// Upload callback function //
$ ("# Icon_img"). attr ("src", ret. filePath );
$ (_ This). val ("change ");
},
Desc, _ size, false, _ flag ,{
CustomContent: '<input type = "hidden" name = "pf" value = "' + pf_id + '"/>'
});
});
});
</Script>

The effect is as follows:

 

 

In this example, fileupload. js is the most important file. After you select this file, you also need php to accept the data for cutting.