$.ajax动态上传图片,基于ajax实现上传图片代码示例解析

素颜马尾好姑娘i 2022-09-03 06:22 233阅读 0赞

js源码：

///

/\*!

\* jQuery upload

\* 用于上传单个文件，上传成功后,返回文件路径。

\* 本插件依赖jQuery，jquery.form 请在使用时引入依赖的文件

\* Date: 2014/4/23

\*/

/\*

使用:

html:

js:

$(document).ready(function () \{

//$(".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, statusText, xhr, $this) \{

//比如插入编辑器

alert(response.Data.RelativePath + $this.attr("value"))

\*/

(function ($) \{

$.extend($.fn, \{

upload: function (settings) \{

var options = $.extend(\{

fileType: "gif|jpg|jpeg|png|bmp", //允许的文件格式

uploadUrl: "/ajax/handler.ashx?action=uploadfile", //上传URL地址

deleteUrl: "/ajax/handler.ashx?action=deletefile", //删除URL地址

width: "", //图片显示的宽度

height: 100, //图片显示的高度

imgSelector: ".imgdiv", //图片选择器

uploadData: \{\}, //上传时需要附加的参数

deleteData: \{\}, //删除时需要附加的参数

deleteFn: function ($parent, showMessage) \{ //删除图片的方法(默认方法使用POST提交)

methods.deleteImage($parent, showMessage);

\},

beforeSubmitFn: "beforeUpload", //上传前执行的方法 原型 beforeSubmit(arr, $form, options);

successFn: "uploadSuccess", //上传成功后执行的方法 uploadSuccess(response, statusText, xhr, $this)

errorFn: "uploadError" //上传失败后执行的方法

\}, 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("![loading.gif%5C%22][loading.gif_5C_22] 正在上传... ");

$this.attr("disabled", true);

//构建ajaxSubmit参数

var data = \{\};

data.data = options.uploadData;

data.type = "POST";

data.dataType = "JSON";

//上传前

data.beforeSubmit = function (arr, $form, options) \{

var beforeSubmitFn;

try \{ beforeSubmitFn = eval(options.beforeSubmitFn) \} catch (err) \{ \};

if (beforeSubmitFn) \{

var $result = beforeSubmitFn(arr, $form, options);

if (typeof ($result) == "boolean")

return $result;

\};

//上传失败

data.error = function (response, statusText, xhr, $form) \{

var errorFn;

try \{ errorFn = eval(options.errorFn) \} catch (err) \{ \};

if (errorFn) \{

errorFn(response.responseText, statusText, xhr, $this);

\};

//上传成功

data.success = function (response, statusText, xhr, $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, statusText, xhr, $this);

\} else \{

alert(response.MessageContent);

$this.attr("disabled", false);

fileBox.html("");

$form.remove();

\};

try \{

//开始ajax提交表单

$form.ajaxSubmit(data);

\} catch (e) \{

alert(e.message);

\});

\})(jQuery)

html代码：

$(document).ready(function () \{

//$(".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, statusText, xhr, $this) \{

//比如插入编辑器

alert(response.Data.RelativePath + $this.attr("value"))

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

public void ProcessRequest(HttpContext context)

context.Response.ContentType = "application/json";

var action = context.Request.QueryString.Get("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);

///

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类代码：

\[Serializable\]

public class JsonResult

private StatusMessageType \_messageType;

private string \_messageContent;

///

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

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

[loading.gif_5C_22]:

$.ajax动态上传图片,基于ajax实现上传图片代码示例解析

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Ajax上传图片

相关默认form上传图片/AJAX上传

相关 AJAX+JQuery+SpringMVC实现图片上传

相关 ajax上传img files,ajax,MultipartFile图片上传

相关 c ajax 上传图片插件,ajax实现图片上传和预览

相关 $.ajax动态上传图片,基于ajax实现上传图片代码示例解析

相关 ajax上传图片

相关 ajax上传图片到后台【formData】

相关 node+ajax实现多张图片上传

相关 AJAX异步上传图片(TP5)