引入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. asp.net获取当前网址url

    asp.net获取当前网址url   设当前页完整地址是:http://www.jb51.net/aaa/bbb.aspx?id=5&name=kelli "http://" ...

  2. python基础学习20----线程

    什么是线程 线程,有时被称为轻量进程(Lightweight Process,LWP),是程序执行流的最小单元.一个标准的线程由线程ID,当前指令指针(PC),寄存器集合和堆栈组成.另外,线程是进程中 ...

  3. SDN 第三次上机作业

    SDN 第三次上机作业 1.创建拓扑 2.利用OVS命令下发流表,实现vlan功能 3.利用OVS命令查看流表 s1: s2: 4.验证性测试 5.Wireshark 抓包验证

  4. Date对象的用法总结

    var dt=new Date(); var dt=+new Date();//一种特殊的写法,只适用于这个Date的对象 console.log(dt); dt.getFullYear();//年 ...

  5. Locust环境搭建及应用-hc课堂笔记

    Locust环境搭建: 1,在命令窗口中,进入到python项目路径,如:d:\Pycharmproject\venv\Scripts 2,执行Scripts下的active.bat,进入到虚拟环境 ...

  6. Android开发——Android中常见的4种线程池(保证你能看懂并理解)

    0.前言 转载请注明出处:http://blog.csdn.net/seu_calvin/article/details/52415337 使用线程池可以给我们带来很多好处,首先通过线程池中线程的重用 ...

  7. 各种 mv power cell

    1. retention register : VDDB 是 backup power,当primary power shutoff 时 backup 会继续供电,将 reg 当前状态保存下来 2. ...

  8. PAT B1033 旧键盘打字 (20 分)

    旧键盘上坏了几个键,于是在敲一段文字的时候,对应的字符就不会出现.现在给出应该输入的一段文字.以及坏掉的那些键,打出的结果文字会是怎样? 输入格式: 输入在 2 行中分别给出坏掉的那些键.以及应该输入 ...

  9. Windows上安装并启动visdom

    windows上安装visdom$ conda install visdomCollecting package metadata: ...working... doneSolving environ ...

  10. WebView之禁止调用第三方浏览器

    一.WebView官方简洁: 一个显示视图的web页面.在这个类的基础上你可以滚自己的web浏览器或简单地显示一些网上的内容.它使用WebKit渲染引擎显示web页面,包括方法向前和向后导航历史,放大 ...