加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

jQuery插件uploadify实现ajax效果的图片上传

发布时间:2020-12-15 23:26:02 所属栏目:百科 来源:网络整理
导读:昨天做了一天的ajax效果的图片上传,就是想让自己学的更加的精一些,所以看了很多第三方的控件,最后还是选择了uploadify这个控件,主要原因是比较容易上手。 首先我们先参考别人的资料(我自己整理了一下) 可选项 解释 事件 方法 这里会用到一些参数,但是

昨天做了一天的ajax效果的图片上传,就是想让自己学的更加的精一些,所以看了很多第三方的控件,最后还是选择了uploadify这个控件,主要原因是比较容易上手。

首先我们先参考别人的资料(我自己整理了一下)

可选项

事件

解释

方法

这里会用到一些参数,但是我们并不需要完全的掌握这些参数,用之前看看有哪些参数,倒是自己会用哪些参数就ok。

由于时间有限,我把核心的代码先发出来,供大家参考:

在标签中先应用css样式 路径这里你的可能和我的不一样

接着再在标签中应用js,js代码注意先后顺序,不然会报错。

同样这里路径是改成你自己的路径。uploaddiy是用jquery开发的,那我们就要先应用jquery才可以再使用uploaddiy所以要注意应用js的时候注意先后顺序

接着是核心的html代码

<%--上传时的进度条--%>
取消上传

写的时候写在form的table表中

接着我们开始完成控件给我们需要完成的接口代码如下:

//用户取消函数
function funCancel(event,ID,fileObj,data) {
jBox.tip('您取消了' + fileObj.name + '操作','info');
return;
}

//图片上传发生的事件
function funComplete(event,response,data) {
//$("#pic").html('<img id="pic" runat="server" src=../upload/' + response + '.jpg style="width:300;height:200px;"/>');
if (response == 0) {
jBox.tip('图片' + fileObj.name + '操作失败','info');
return;
}
$("#pic").attr("src","../upload/" + response).height(200).width(300);
jBox.tip('图片' + fileObj.name + '操作成功','info');
return;
}

//上传发生错误时。
function funError(event,errorObj) {
jBox.tip(errorObj.info);
return;
}

接着我们来完成一般处理时间的文件,代码如下:

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"); //文件已经存在
// 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);
//下面这句代码缺少的话,上传成功后上传队列的显示不会自动消失
context.Session[context.Session["userName"].ToString()] = filename;

context.Response.Write(filename);
}
else
{
context.Response.Write("0");
}

成功上传返回文件的名字,失败的话返回一个0,js不追返回值,如果是0表示失败,如果不是0则动态的给img加载src。

源码下载:

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!