Ich benötige ein Plug-in zum Hochladen von Bildern, aber online ist keins verfügbar, das meinen Anforderungen entspricht und einfach zu verwenden ist. Also habe ich selbst eines geschrieben. Freunde, die es brauchen, können darauf verweisen
Heute benötige ich ein Bild-Upload-Plug-in, aber es ist online keins verfügbar, das meinen Bedürfnissen entspricht und einfach zu verwenden ist. Also habe ich selbst eines geschrieben.
Methode 1: Verwenden Sie nur JQuery-Code ohne Plug-Ins von Drittanbietern. Der Code lautet wie folgt
<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() {
$('.inp_fileToUpload').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 : 'post',
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>Nach dem Login kopieren
Nachteile dieser Methode: Da IE689 keine Formdaten unterstützt, unterstützt diese Methode IE9 und niedrigere Versionen nicht
Methode 2: Verwenden Sie das Plug-in ajaxfileupload.js
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 : '/upload/upload_json.ashx', //用于文件上传的服务器端请求地址
secureuri : false, //是否需要安全协议，一般设置为false
fileElementId : file_id, //文件上传域的ID
dataType : 'json', //返回值类型 一般设置为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>Nach dem Login kopieren
Hinweis: Diese Methode wird derzeit auf Unterstützung von IE8/9 und Google getestet und ist besser kompatibel als Methode 1. Es wird empfohlen, Methode 2 zu verwenden
Hintergrundverarbeitungscode für Datei-Upload (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(','), 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;
}
}
}Nach dem Login kopieren
Das Obige ist das, was ich für alle zusammengestellt habe. Ich hoffe, es wird für alle hilfreich sein Zukunft.
Verwandte Artikel:
Unendliche Ergänzungen, Löschungen und Änderungen von hierarchischen und baumstrukturierten Daten
Besprechen Sie einige kleinere Probleme in Ajax
Ajax-Rückruf, um ein neues Formular zu öffnen und das Abfangen des Browsers zu verhindern. Effektive Methode_AJAX-bezogen
Das obige ist der detaillierte Inhalt vonErstellen Sie Ihren eigenen Ajax-Bild-Upload. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
