ajax图片上传，图片异步上传，更新实例

最近在研究ajax图片上传，图片异步上传，更新，留作参考。

直接上源码吧：

js源码：

///

/*!

jQuery upload
用于上传单个文件，上传成功后,返回文件路径。
本插件依赖jQuery，jquery.form 请在使用时引入依赖的文件
Date: 2014/4/23
/
/
<div style="width: 100%; float: left;">

js:

//$(".upload").upload({
// uploadData: { id: "12233" },// successFn: function (response,statusText,xhr,$this) {
// alert(response.Data.RelativePath)
// },// deleteData: { id: function () { return "asdfasdf" } }
//});

$(".upload").upload({
uploadData: { id: "12233" },successFn: "success",//可以是字符串
deleteData: { id: function () { return "asdfasdf" } }
});
});

//上传成功后执行该函数
function success(response,$this) {
//比如插入编辑器
alert(response.Data.RelativePath + $this.attr("value"))
}
*/

(function ($) {
$.extend($.fn,{
upload: function (settings) {

//上传准备函数
var methods = {
//验证文件格式
checkFile: function (filename) {
var pos = filename.lastIndexOf(".");
var str = filename.substring(pos,filename.length);
var str1 = str.toLowerCase();
if (typeof options.fileType !== 'string') { options.fileType = "gif|jpg|jpeg|png|bmp"; }
var re = new RegExp(".(" + options.fileType + ")$");
return re.test(str1);
},//创建表单
createForm: function () {
var $form = document.createElement("form");
$form.action = options.uploadUrl;
$form.method = "post";
$form.enctype = "multipart/form-data";
$form.style.display = "none";
//将表单加当document上，
document.body.appendChild($form); //创建表单后一定要加上这句否则得到的form不能上传。document后要加上body,否则火狐下不行。
return $($form);
},//创建图片
createImage: function () {
//不能用 new Image() 来创建图片，否则ie下不能改变img 的宽高
var img = $(document.createElement("img"));
img.attr({ "title": "双击图片可删除图片！" });
if (options.width !== "") {
img.attr({ "width": options.width });
}
if (options.height !== "") {
img.attr({ "height": options.height });
}
return img;
},showImage: function (filePath,$parent) {
var $img = methods.createImage();
$parent.find(options.imgSelector).find("img").remove();
//要先append再给img赋值，否则在ie下不能缩小宽度。
$img.appendTo($parent.find(options.imgSelector));
$img.attr("src",filePath);
this.bindDelete($parent);
},bindDelete: function ($parent) {
$parent.find(options.imgSelector).find("img").bind("dblclick",function () {
options.deleteFn($parent,true);
});
},deleteImage: function ($parent,showMessage) {
var $fileInput = $parent.find("input:hidden");
if ($fileInput.val() !== "") {

var data = $.extend(options.deleteData,{ filePath: $fileInput.val(),t: Math.random() });

$.post(options.deleteUrl,data,function (response) {

if (showMessage) { alert(response.MessageContent) }

if (response.MessageType == 1) {
$fileInput.val("");
$parent.find(options.imgSelector).find("img").remove();
}
},"JSON");
}
},onload: function ($parent) {
var hiddenInput = $parent.find("input:hidden");
if (typeof hiddenInput !== "undefined" && hiddenInput.val() !== "") {
var img = methods.createImage();
if ($parent.find(options.imgSelector).find("img").length > 0) { $parent.find(options.imgSelector).find("img").remove(); }
//要先append再给img赋值，否则在ie下不能缩小宽度。
img.appendTo($parent.find(options.imgSelector));
img.attr("src",hiddenInput.val());
methods.bindDelete($parent);
}
}
};
//上传主函数
this.each(function () {
var $this = $(this);
methods.onload($this.parent());
$this.bind("click",function () {
var $fileInput = $(this).parent().find("input:file");
var fileBox = $fileInput.parent();

if ($fileInput.val() === "") {
alert("请选择要上传的图片！");
return false;
}
//验证图片
if (!methods.checkFile($fileInput.val())) {
alert("文件格式不正确，只能上传格式为：" + options.fileType + "的文件。");
return false;
}
//若隐藏域中有图片，先删除图片
if ($fileInput.val() !== "") {
options.deleteFn($this.parent(),false);
//methods.deleteImage($this.parent(),false);
}

//创建表单
var $form = methods.createForm();

//把上传控件附加到表单
$fileInput.appendTo($form);
fileBox.html("<img src=\"/admin/styles/images/loading.gif\" /> 正在上传... ");
$this.attr("disabled",true);

//构建ajaxSubmit参数
var data = {};
data.data = options.uploadData;
data.type = "POST";
data.dataType = "JSON";
//上传前
data.beforeSubmit = function (arr,options) {

var beforeSubmitFn;
try { beforeSubmitFn = eval(options.beforeSubmitFn) } catch (err) { };
if (beforeSubmitFn) {
var $result = beforeSubmitFn(arr,options);
if (typeof ($result) == "boolean")
return $result;
}
};
//上传失败
data.error = function (response,$form) {
var errorFn;
try { errorFn = eval(options.errorFn) } catch (err) { };
if (errorFn) {
errorFn(response.responseText,$this);
}
};
//上传成功
data.success = function (response,$form) {
//response = eval("(" + response + ")");
if (response.MessageType == 1) {
methods.showImage(response.Data.RelativePath,$this.parent());
$this.parent().find("input:hidden").val(response.Data.RelativePath);

var successFn;
try { successFn = eval(options.successFn) } catch (err) { };
if (successFn) {
$.ajaxSetup({ cache: false });//这个不能少，否则ie下会提示下载
successFn(response,$this);
}

} else {
alert(response.MessageContent);
}
$this.attr("disabled",false);
fileBox.html("<input type=\"file\" name=\"file\" />");
$form.remove();
};

try {
//开始ajax提交表单
$form.ajaxSubmit(data);
} catch (e) {
alert(e.message);
}
});
});
}
});
})(jQuery)

HTML代码：

服务器端使用一般处理程序：

("action").ToLower(); var response = new JsonResult(StatusMessageType.Error,"没有权限或无效请求。").ToJson(); switch (action) {

case "uploadfile":
if (context.Request.Files.Count > 0)
response = UploadFile(context.Request);
break;
case "deletefile":
response = DeleteFile(context.Request.Form);
break;
default:
break;
}
context.Response.Write(response);
}
///

///
///

/// <param name="file">
///
private string UploadFile(HttpRequest request)
{
if (request.Files.Count == 0)
return new JsonResult(StatusMessageType.Error,"没有可处理的数据。").ToJson();
var id = request.Form.Get("id","");

var file = request.Files[0];
if (file == null || file.ContentLength <= 0 || string.IsNullOrEmpty(file.FileName))
return new JsonResult(StatusMessageType.Error,"没有可处理的数据。").ToJson();

//IStoreFile storeFile = null;

string[] datePaths = new string[] { "~/uploads/" };
datePaths = datePaths.Union(DateTime.Now.ToString("yyyy-MM-dd").Split('-')).ToArray();
var relativePath = storeProvider.JoinDirectory(datePaths);

var dirPath = HttpContext.Current.Server.MapPath(relativePath);

if (!System.IO.Directory.Exists(dirPath))
System.IO.Directory.CreateDirectory(dirPath);

var fileName = GenerateFileName(Path.GetExtension(file.FileName));

var filePath = Path.Combine(dirPath,fileName);
file.SaveAs(filePath);
return new JsonResult(StatusMessageType.Success,"上传成功。",new
{
RelativePath = WebUtility.ResolveUrl(Path.Combine(relativePath,fileName)),Size = file.ContentLength,Id = id,}).ToJson();
}

public string DeleteFile(NameValueCollection form)
{
var filePath = form.Get("filePath","").Trim();
if (string.IsNullOrEmpty(filePath))
return new JsonResult(StatusMessageType.Error,"无效提交。").ToJson();

try
{
if (System.IO.File.Exists(HttpContext.Current.Server.MapPath(filePath)))
{
System.IO.File.Delete(HttpContext.Current.Server.MapPath(filePath));
return new JsonResult(StatusMessageType.Success,"文件删除成功。").ToJson();
}
else
{
return new JsonResult(StatusMessageType.Success,"找不到该文件。").ToJson();
}
}
catch (Exception)
{
return new JsonResult(StatusMessageType.Hint,"发生错误。").ToJson();
}
}

///

/// 生成随机文件名
///

///
private string GenerateFileName(string extension)
{
return DateTime.Now.Ticks.ToString() + extension;
}

程序使用的是framework4.0，所以使用了一些扩展方法。

JsonTesult类代码：

///

///
///

/// <param name="messageType">
/// <param name="messageContent">
/// <param name="data">
public JsonResult(StatusMessageType messageType,string messageContent,object data = null)
{
_messageType = messageType;
_messageContent = messageContent;
Data = data;
}

public StatusMessageType MessageType
{
get { return _messageType; }
set { _messageType = value; }
}

public string MessageContent
{
get { return _messageContent; }
set { _messageContent = value; }
}

public object Data { get; set; }

public string ToJson()
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
var json = serializer.Serialize(this);

//string p = @"\/Date(\d+)\/";
//MatchEvaluator matchEvaluator = new MatchEvaluator(ConvertJsonDateToDateString);
//Regex reg = new Regex(p);
//json = reg.Replace(json,matchEvaluator);
return json;
}

private static string ConvertJsonDateToDateString(Match m)
{
string result = string.Empty;
DateTime dt = new DateTime(1970,1,1);
dt = dt.AddMilliseconds(long.Parse(m.Groups[1].Value));
dt = dt.ToLocalTime();
result = dt.ToString("d");
return result;
}
}

StatusMessageType枚举类：

/// 提示消息类别 /// public enum StatusMessageType { ///

/// 权限不足 ///

NoAccess = -2,///

/// 错误 ///

Error = -1,///

/// 成功 ///

Success = 1,///

/// 提示信息 ///

Hint = 0 }

其他的扩展方法就不一一给出来了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

ajax图片上传，图片异步上传，更新实例

猜你在找的Ajax相关文章