jQuery plugin uploadify for ajax effect picture upload

Yesterday, I uploaded the picture of ajax effect for 1 day, just to learn more precisely, so I read a lot of third-party controls, and finally chose uploadify control, mainly because it is easier to get started.

First let's refer to other people's data (I organized it myself)

Optional

Event

Method

You'll use some parameters here, but we don't need to have a complete understanding of them. Before you use them, you'll see which parameters you'll use, ok.

Due to time constraints, I will send out the core code for your reference:

stay < head > Apply css style to label first < link href="../Plugin/uploadify.css" rel="stylesheet" type="text/css" / > Path Here you may not be the same as mine

Next on < head > Use js in the label, js code should be in order or error will occur.

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script src="../Plugin/swfobject.js" type="text/javascript"></script>
<script src="../Plugin/jquery.uploadify.v2.1.4.min.js" type="text/javascript"></script>

The same path here is to change to your own.uploaddiy was developed with jquery, so we need to apply jquery before we can use uploaddiy, so we should pay attention to the sequence when applying js

Next comes the core html code

<tr>
<th scope="row"> chart   Picture: </th>
<td>
 * <div style="float:left;width:125px;height:35px;">
  * <input type="file" name="uploadify" id="uploadify" /> <%-- Upload progress bar --%>
 </div>
 <div id="fileQueue" style="float:left;height:35px;"></div>
 <div style="float:left;height:35px;">
  * <a href="javascript:$('#uploadify').uploadifyUpload()" class="btn-lit"><span> upload </span></a>
  <a href="javascript:$('#uploadify').uploadifyClearQueue()" class="btn-lit"><span> Cancel upload </span></a>
 </div>
</td>
</tr>
<tr>
  <th scope="row">&nbsp;</th>
  <td><asp:Image ID="pic" runat="server" /></td> * <%-- Successful Upload Generate Picture Preview --%>
</tr>

Write in table table of form

Then we start to finish the interface code that the control gives us to finish as follows:

//uploadify Custom settings for plug-ins 
$(document).ready(function () {
 $("#uploadify").uploadify({
  'uploader': '../Plugin/uploadify.swf',
  'script': 'UploadImg.ashx',
  'cancelImg': '../Plugin/cancel.png',
  'folder': '../upload',
  'buttonText': 'SELECT Pic',
  'fileExt': '*.jpg;*.gif,*.png',     // File format allowed to upload is *.jpg,*.gif,*.png
  'fileDesc': 'Web Image Files(.JPG,.GIF,.PNG)', // Filter out *.jpg,*.gif,*.png Files 
  'queueID': 'fileQueue',
  'sizeLimit': '2048000',       // The maximum allowable file size is 2M
  'auto': false,         // Require manual application submission 
  'multi': false,         //1 Only uploads allowed 1 Picture 
  'onCancel': funCancel,       // When the user cancels the upload 
  'onComplete': funComplete,      // Complete upload task 
  'OnError': funError        // When an upload error occurs 
 });
});

// User Cancel Function 
function funCancel(event, ID, fileObj, data) {
 jBox.tip(' You canceled ' + fileObj.name + ' operation ', 'info');
 return;
}

// What happened when the picture was uploaded 
function funComplete(event, ID, fileObj, response, data) {
 //$("#pic").html('<img id="pic" runat="server" src=../upload/' + response + '.jpg style="width:300;height:200px;"/>');
 if (response == 0) {
  jBox.tip(' picture ' + fileObj.name + ' operation failed ', 'info');
  return;
 }
 $("#pic").attr("src", "../upload/" + response).height(200).width(300);
 jBox.tip(' picture ' + fileObj.name + ' Operation Successful ', 'info');
 return;
}

// When an upload error occurs. 
function funError(event, ID, fileObj, errorObj) {
 jBox.tip(errorObj.info);
 return;
}

Next, let's finish the general processing time file with the following code:

context.Response.ContentType = "text/plain";
context.Response.Charset = "utf-8";

HttpPostedFile file = context.Request.Files["Filedata"];
string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"]) + "\\";

if (file != null)
{
 //if (File.Exists(uploadPath + file.FileName))
 //{
 // context.Response.Write("3");   // file already exists 
 // return;
 //}

 string[] fn = file.FileName.Split('.');
 string ext = fn[fn.Length - 1];
 string filename = DateTime.Now.ToString("yyyyMMddhhmmss")+"."+ext;
 if (!Directory.Exists(uploadPath))
 {
  Directory.CreateDirectory(uploadPath);
 }
 file.SaveAs(uploadPath + filename);
 // If the code below is missing, the display of the upload queue will not disappear automatically after the upload is successful 
 context.Session[context.Session["userName"].ToString()] = filename;
  
 context.Response.Write(filename);
}
else
{
 context.Response.Write("0");
} 

Successfully uploaded the name of the returned file, if failed, returns a 0, js does not pursue the return value, if 0 means failure, if not 0 then dynamically loads src to img.

Source download: http://xiazai.ofstack.com/201606/yuanma/jQuery-uploadify-ajax-upload (ofstack.com).rar