Home > Web Front-end > JS Tutorial > Create your own ajax image upload

Create your own ajax image upload

亚连
Release: 2018-05-25 15:51:53
Original
1789 people have browsed it

I need an image upload plug-in, but there is no one available on the Internet that meets my needs and is easy to use. So I wrote one myself. Friends who need it can refer to

Today I need an image upload plug-in, but there is no one available online that meets my needs and is easy to use. So I wrote one myself.

Method 1, only use jquery code without third-party plug-ins. The code is as follows

<p> 
<label>上传图片</label> 
<input class="ke-input-text" type="text" id="url" value="" readonly="readonly" /> 
<input type="button" id="uploadButton" value="Upload" /> 
</p> 
<script type="text/javascript"> 
$(function() { 
$(&#39;.inp_fileToUpload&#39;).change(function() { 
var formdata = new FormData(); 
var v_this = $(this); 
var fileObj = v_this.get(0).files; 
url = "/upload/upload_json.ashx"; 
//var fileObj=document.getElementById("fileToUpload").files; 
formdata.append("imgFile", fileObj[0]); 
jQuery.ajax({ 
url : url, 
type : &#39;post&#39;, 
data : formdata, 
cache : false, 
contentType : false, 
processData : false, 
dataType : "json", 
success : function(data) { 
if (data.error == 0) { 
v_this.parent().children(".img_upload").attr("src", data.url); 
//$("#img").attr("src",data.url); 
} 
} 
}); 
return false; 
}); 
}); 
</script>
Copy after login

Disadvantages of this method: Since IE6\8\9\ does not support formdata, this method does not support IE9 and below versions

Method 2: Use the ajaxfileupload.js plug-in
ajaxfileupload.js
html code:

<p> 
<label>ajax上传</label> 
<input type="file" name="fileToUpload" id="fileToUpload" class="inp_fileToUpload" multiple="multiple"/> 
<img src="$web.site$web.tpl#**#adminht/images/lb_head.jpg" width="30px" height="30px" class="img_upload" id="img" /> 
</p> 
<p> 
<label>最新修改人员:</label> 
<input readonly="readonly" type="text" size="30" /> 
</p> 
<p> 
<script type="text/javascript"> 
$(function() { 
$(".inp_fileToUpload").live("change", function() {//现在这个已经适用于多个file表单。 
ajaxFileUpload($(this).attr("id"), $(this).parent().children(".img_upload").attr("id")); 
}) 
}) 
function ajaxFileUpload(file_id, img_id) { 
jQuery.ajaxFileUpload({ 
url : &#39;/upload/upload_json.ashx&#39;, //用于文件上传的服务器端请求地址 
secureuri : false, //是否需要安全协议,一般设置为false 
fileElementId : file_id, //文件上传域的ID 
dataType : &#39;json&#39;, //返回值类型 一般设置为json 
success : function(data, status)//服务器成功响应处理函数 
{ 
if (data.error == 0) { 
$("#" + img_id).attr("src", data.url); 
} else { 
alert(data.message); 
} 
}, 
error : function(data, status, e)//服务器响应失败处理函数 
{ 
alert(e); 
} 
}) 
return false; 
} 
</script> 
</p> 
</p>
Copy after login


Description: This method is currently tested to support IE8/9, Google, and is more compatible than method 1. It is recommended to use method 2

File upload background processing code (asp.net version)

<%@ webhandler Language="C#" class="Upload" %> 
using System; 
using System.Collections; 
using System.Web; 
using System.IO; 
using System.Globalization; 
using LitJson; 
public class Upload : IHttpHandler 
{ 
private HttpContext context; 
public void ProcessRequest(HttpContext context) 
{ 
String aspxUrl = context.Request.Path.Substring(0, context.Request.Path.LastIndexOf("/") + 1); 
//文件保存目录路径 
String savePath = "attached/"; 
//文件保存目录URL 
String saveUrl = aspxUrl + "attached/"; 
//定义允许上传的文件扩展名 
Hashtable extTable = new Hashtable(); 
extTable.Add("image", "gif,jpg,jpeg,png,bmp"); 
extTable.Add("flash", "swf,flv"); 
extTable.Add("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb"); 
extTable.Add("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2"); 
//最大文件大小 
int maxSize = 1000000; 
this.context = context; 
HttpPostedFile imgFile = context.Request.Files["imgFile"]; 
if (imgFile == null) 
{ 
showError("请选择文件。"); 
} 
String dirPath = context.Server.MapPath(savePath); 
if (!Directory.Exists(dirPath)) 
{ 
showError("上传目录不存在。"); 
} 
String dirName = context.Request.QueryString["dir"]; 
if (String.IsNullOrEmpty(dirName)) { 
dirName = "image"; 
} 
if (!extTable.ContainsKey(dirName)) { 
showError("目录名不正确。"); 
} 
String fileName = imgFile.FileName; 
String fileExt = Path.GetExtension(fileName).ToLower(); 
if (imgFile.InputStream == null || imgFile.InputStream.Length > maxSize) 
{ 
showError("上传文件大小超过限制。"); 
} 
if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(((String)extTable[dirName]).Split(&#39;,&#39;), fileExt.Substring(1).ToLower()) == -1) 
{ 
showError("上传文件扩展名是不允许的扩展名。\n只允许" + ((String)extTable[dirName]) + "格式。"); 
} 
//创建文件夹 
dirPath += dirName + "/"; 
saveUrl += dirName + "/"; 
if (!Directory.Exists(dirPath)) { 
Directory.CreateDirectory(dirPath); 
} 
String ymd = DateTime.Now.ToString("yyyyMMdd", DateTimeFormatInfo.InvariantInfo); 
dirPath += ymd + "/"; 
saveUrl += ymd + "/"; 
if (!Directory.Exists(dirPath)) { 
Directory.CreateDirectory(dirPath); 
} 
String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt; 
String filePath = dirPath + newFileName; 
imgFile.SaveAs(filePath); 
String fileUrl = saveUrl + newFileName; 
Hashtable hash = new Hashtable(); 
hash["error"] = 0; 
hash["url"] = fileUrl; 
context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8"); 
context.Response.Write(JsonMapper.ToJson(hash)); 
context.Response.End(); 
} 
private void showError(string message) 
{ 
Hashtable hash = new Hashtable(); 
hash["error"] = 1; 
hash["message"] = message; 
context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8"); 
context.Response.Write(JsonMapper.ToJson(hash)); 
context.Response.End(); 
} 
public bool IsReusable 
{ 
get 
{ 
return true; 
} 
} 
}
Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Infinite hierarchical and tree structure data addition, deletion and modification

Discuss some minor issues in Ajax

Ajax callback to open a new form to prevent browser interception effective method_AJAX related

The above is the detailed content of Create your own ajax image upload. For more information, please follow other related articles on the PHP Chinese website!

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