引入jQuery库
引入ajaxfileupload.js上传插件库(这也是jQuery的一个插件)
以ASP.NET为例 <input type="file" id="uploadfile" name="uploadfile"/>
<script type="text/javascript">
$("#uploadfile").change(function(){ $.ajaxFileUpload({
url: '../ajax/AjaxCallback.ashx',//处理上传用的后台程序,可以是PHP,也可以是ASP等
secureuri: false,//异步
fileElementId: 'uploadfile',//上传控件ID
dataType: 'json',//返回的数据信息格式
success: function(data, status) {
if (data.code == '10000') {
alert("上传成功"); } else {
alert("上传失败");
}
}, error: function(data, status, e) {
alert(e);
}
}) }); </script>
后台CS代码 /// <summary>
/// 图片上传
/// </summary>
private void ImageUpload()
{
Response.ContentType = "text/html";//这里一定要html
if (Request.Files.Count > 0)
{
HttpPostedFile file = Request.Files[0];
if (file.ContentLength > 0)
{
string suffix = file.FileName.Substring(file.FileName.LastIndexOf('.'));//后缀
if (".jpg.png.gif.jpeg".IndexOf(suffix.ToLower()) == -1)//文件格式,这里采用图片格式说明
{
Response.Write("{\"msg\":\"文件格式不正确!\",code:\"10001\"}");
return;
} try
{
file.SaveAs(Server.MapPath("~/uploadfile/") + newName);
Response.Write("{\"msg\":\"" + newName + "\",code:\"10000\"}");
return;
}
catch (Exception ex)
{
Response.Write("{\"msg\":\"" + HttpUtility.HtmlEncode(ex.Message) + "\",code:\"10001\"}");
return;
}
}
Response.Write("{\"msg\":\"请选择要上传的文件!\",code:\"10001\"}");
return;
}
Response.Write("{\"msg\":\"请选择要上传的文件!\",code:\"10001\"}");
return;
}
http://www.cnblogs.com/linjiqin/p/3530848.html
http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html
http://www.phpletter.com/cn/Demo/AjaxFileUpload-Demo/

Jq_input file标签上传图片到服务器的更多相关文章

  1. jsp页面file标签上传图片以及blob类型数据库存取。

    我的jsp页面表单如下: <form name="form1" action="/YiQu/AddUserServlet?jurisdiction=1" ...

  2. asp.net type=file在上传图片到服务器

    前台 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> ...

  3. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  4. 通过android 客户端上传图片到服务器

    昨天,(在我的上一篇博客中)写了通过浏览器上传图片到服务器(php),今天将这个功能付诸实践.(还完善了服务端的代码) 不试不知道,原来通过android 向服务端发送图片还真是挺麻烦的一件事. 上传 ...

  5. file标签选择文件change事件失效处理方法

    file只能处罚一次change事件,在change事件中重新替换file标签即可生效 eg: $(function(){ //上传图片 $("body").on("ch ...

  6. Wcf for wp8 上传图片到服务器,将图片名字插入数据库字段(五)

    环境:.NET Framework 3.5 服务: IIS EXpress托管 WCF服务程序 配置:Web.config <!--<connectionStrings> <a ...

  7. angularjs中使用 <input type="file">标签实现一次最多上传5张图片

    前期准备: 1.angular.js 2.bootstrap.css 具体如何实现呢?请看下面代码哈哈哈. 在angular项目中,如果要给<input type="file" ...

  8. .NET开发微信小程序-上传图片到服务器

    1.上传图片分为几种: a:上传图片到本地(永久保存) b:上传图片到本地(临时保存) c:上传图片到服务器 a和b在小程序的api文档里面有.直接说C:上传图片到服务器 前端代码: /* 上传图片到 ...

  9. Android 上传图片到服务器二--------调用相机7.0以上权限问题

    [目录] (一)上传图片到服务器一 ---------------------------------Android代码 (二)上传图片到服务器二--------------------------- ...

随机推荐

  1. IIS日志导致磁盘被占满

    某服务器只部署了个IIS,应用目录都在D盘,可C盘97.5GB空间却被占满了. 将系统文件,隐藏文件全部显示,再选中所有的C盘文件及文件夹查看容量只有19GB. 既然只部署了IIS,那自然就怀疑到了I ...

  2. 转:35个让人惊讶的 CSS3 动画效果演示

    本文收集了35个惊人的 CSS3 动画演示,它们将证明 CSS3 Transform 和 Transition 属性的强大能力.CSS 是网页设计非常重要的一部分,随着越来越多的浏览器对 CSS3 支 ...

  3. 清理 Xcode 10

    1,清理 ~/Library/Developer/CoreSimulator/Devices说明:该目录存放当前的所有模拟器,每个标识符代表一台机器,清理掉避免存在旧版本的模拟器缓存 执行: 关闭模拟 ...

  4. beta冲刺————第三天(3/5)

    完善的具体内容: 前端: (1)可以进行修改文字大小背景 其中,金色的文字个人觉得很好看,点赞.(我很满意啊) (2)可以改变成夜间模式(也很不错啊) 后端: 尝试将本地的后端war文件,以及数据库传 ...

  5. gcd以及exgcd入门讲解

    gcd就是最大公约数,gcd(x, y)一般用(x, y)表示.与此相对的是lcm,最小公倍数,lcm(x, y)一般用[x, y]表示. 人人都知道:lcm(x, y) = x * y / gcd( ...

  6. Hadoop安装教程【转】

    原贴:http://www.powerxing.com/install-hadoop/ 当开始着手实践 Hadoop 时,安装 Hadoop 往往会成为新手的一道门槛.尽管安装其实很简单,书上有写到, ...

  7. php请求API接口方法

    thinkphp下直接放入公共函数即可. /** * 通过URL获取页面信息 * @param string $url 地址 * @return string 返回页面信息 */ function g ...

  8. VC++环境下单文档SDI与OpenGL多视图分割窗口的实现-类似3DMAX的主界面

    本文主要讲述如何在VC++环境下实现单文档SDI与OpenGL多视图分割窗口,最终的界面类似3DMAX的主界面.首先给出我实现的效果图: 整个实现过程网络上有很多零散的博文,请各位自行搜索,在基于对话 ...

  9. 关于YARN Node Labels的一点理解

    最近在做实验,实验需要进行分区域计算,网上查了资料后发现Yarn Node Labels + Capacity-Scheduler可以实现我的需求 但是当任务提交到capacity-scheduler ...

  10. DB-Engines Ranking

    DB-Engines Ranking trend chart The DB-Engines Ranking ranks database management systems according to ...