ajax 结合 ashx 处理程序实现文件上传
一、ajaxFileUpload 是一个异步上传文件的 jQuery 插件。
ajaxFileUpload 参数说明:(copy 了别人的参数说明)
1、url 上传处理程序地址。
2,fileElementId 需要上传的文件域的 ID,即的 ID。
3,secureuri 是否启用安全提交,默认为 false。
4,dataType 服务器返回的数据类型。可以为 xml,script,json,html。如果不填写,jQuery 会自动判断。
5,success 提交成功后自动执行的处理函数,参数 data 就是服务器返回的数据。
6,error 提交失败自动执行的处理函数。
7,data 自定义参数。这个东西比较有用,当有数据是与上传的图片相关的时候,这个东西就要用到了。
8, type 当要提交自定义参数时,这个参数要设置成 post
HTML 代码:
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title></title>
- <!--引用相关的js文件 注意先引用jquery-->
- <script src="js/jquery-1.11.3.js"></script>
- <script src="js/ajaxfileupload.js"></script>
- <style>
- .file {
- position: relative;
- background-color: #b32b1b;
- border: 1px solid #ddd;
- width: 68px;
- height: 25px;
- display: inline-block;
- text-decoration: none;
- text-indent: 0;
- line-height: 25px;
- font-size: 14px;
- color: #fff;
- margin: 0 auto;
- cursor: pointer;
- text-align: center;
- border: none;
- border-radius: 3px;
- }
- .file input {
- position: absolute;
- top: 0;
- left: -2px;
- opacity: 0;
- width: 10px;
- }
- </style>
- <script>
- $(function () {
- //选择文件
- $(".file").on("change", "input[type='file']", function () {
- var filePath = $(this).val();
- //设置上传文件类型
- ////if (filePath.indexOf("xls") != -1 || filePath.indexOf("xlsx") != -1) {
- //上传文件
- $.ajaxFileUpload({
- url: 'FileHandler.ashx',//处理程序路径
- secureuri: false,
- fileElementId: 'btnfile',
- dataType: 'json',
- success: function (data, status) {
- //获取上传文件路径
- //$("#txt_filePath").val(data.filenewname);
- alert("文件上传成功!");
- },
- error: function (data, status, e) {
- //alert(e);
- alert("not");
- }
- });
- ////} else {
- //// alert("请选择正确的文件格式!");
- //// //清空上传路径
- //// $("#txt_filePath").val("");
- //// return false;
- ////}
- });
- })
- </script>
- </head>
- <body style="font-size:25px;">
- <!--ajax配合ashx实现文件上传-->
- <div>
- <span>选择文件:</span><input id="txt_filePath" type="text" readonly="readonly" />
- <a class="file"><input id="btnfile" name="btnfile" type="file" />浏览</a>
- </div>
- </body>
- </html>
ashx 代码:
- <%@ webHandler Language="C#" Class="FileHandler" %>
- using System;
- using System.Web;
- public class FileHandler : IHttpHandler {
- public void ProcessRequest (HttpContext context) {
- //context.Response.ContentType = "text/plain";
- //context.Response.Write("Hello World");
- context.Response.ContentType = "text/plain";
- string msg = string.Empty;
- string error = string.Empty;
- string result = string.Empty;
- string filePath = string.Empty;
- string fileNewName = string.Empty;
- //这里只能用<input type="file" />才能有效果,因为服务器控件是HttpInputFile类型
- HttpFileCollection files = context.Request.Files;
- if (files.Count > 0)
- {
- //设置文件名
- fileNewName = DateTime.Now.ToString("yyyyMMddHHmmssff") + "_" + System.IO.Path.GetFileName(files[0].FileName);
- //保存文件
- files[0].SaveAs(context.Server.MapPath("~/Upload/" + fileNewName));
- msg = "文件上传成功!";
- result = "{msg:'" + msg + "',filenewname:'" + fileNewName + "'}";
- }
- else
- {
- error = "文件上传失败!";
- result = "{ error:'" + error + "'}";
- }
- context.Response.Write(result);
- context.Response.End();
- }
- public bool IsReusable {
- get {
- return false;
- }
- }
- }
如果想上传多张图片只要给 input 添加一个 multiple 属性
即:
- <input id="btnfile" name="btnfile" type="file" multiple/>
就可以上传多个图片
ajaxFileUpload 下载:
链接:https://pan.baidu.com/s/1slkfpOp 密码:5s8r
来源: http://www.bubuko.com/infodetail-2451864.html