asp.net 基于ajaxfileupload.js 实现文件异步上传

前台代码:

/*修改头像*/

//上传

function _sc() {

$(".ckfile").html("").css("color", "#535353");

$("#_userImgPath").val("");

var str = $("#file").val();

if ($.trim(str) == "") {

$(".ckfile").html("请选择文件。").css("color", "red");

return false;

}

else {

var postfix = str.substring(str.lastIndexOf(".") + 1).toUpperCase();

if (postfix == "JPG" || postfix == "JPEG" || postfix == "PNG" || postfix == "GIF" || postfix == "BMP") {

$(‘#showimg‘).attr(‘src‘, ‘Images/loading.gif‘).attr("title", "上传中,请稍后…");

var path = "Upload/UserImg";

$.ajaxFileUpload({

url: ‘/Upload.aspx?path=Upload|UserImg&shape=100*100‘,

secureuri: false,

fileElementId: ‘file‘,

dataType: ‘text‘,

success: function (msg) {

if (msg.lastIndexOf(path) == -1) {

$(".ckfile").html(msg).css("color", "red");

}

else {

$(‘#showimg‘).attr(‘src‘, msg).attr("title", "我的头像");

$("#_userImgPath").val(msg);

}

}

});

} else {

$(".ckfile").html("文件格式错误。").css("color", "red");

return false;

}

}

}

后台代码:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using SS.Upload;

using WFC.Fenxiao;

namespace wanfangcheng

{

public partial class Upload : BasePage

{

//文件大小 1024 kb

private long size = 1024;

//文件类型

private string type = ".jpg|.jpeg|.png|.gif|.bmp";

//保存名称

string name = "";

//保存路径

private string path = @"Upload/UserImg";

//保存大小

private string shape = "100*100";

protected void Page_Load(object sender, EventArgs e)

{

HttpFileCollection files = Request.Files;

if (files != null && files.Count > 0)

{

name = BaseRole.Instance.UserId.ToString();

if (Request.QueryString["size"] != null)

{

size = Convert.ToInt32(Request.QueryString["size"]);

}

if (Request.QueryString["path"] != null)

{

path = Request.QueryString["path"].ToString().Trim().Replace(‘|‘, ‘/‘);

}

if (Request.QueryString["name"] != null)

{

name = Request.QueryString["name"].ToString().Trim();

}

if (Request.QueryString["shape"] != null)

{

shape = Request.QueryString["shape"].ToString().Trim();

}

uploadMethod(files);

}

}

/// <summary>

/// 上传图片

/// </summary>

/// <param name="hc"></param>

public void uploadMethod(HttpFileCollection hc)

{

HttpPostedFile _file = hc[0];

//文件大小

long _size = _file.ContentLength;

if (_size <= 0)

{

Response.Write("文件错误。");

Response.End();

return;

}

if (size * 1024 < _size)

{

Response.Write("文件过大,最大限制为" + size + "KB。");

Response.End();

return;

}

//文件名

string _name = _file.FileName;

//文件格式

string _tp = System.IO.Path.GetExtension(_name).ToLower();

if (type.IndexOf(_tp) == -1)

{

Response.Write("文件格式错误。");

Response.End();

return;

}

//保存路径

string _path = HttpContext.Current.Server.MapPath(path) + @"/" + name + _tp;

try

{

int w = Convert.ToInt32(shape.Split(‘*‘)[0]);

int h = Convert.ToInt32(shape.Split(‘*‘)[1]);

ImageHelper.CutForCustom(_file, _path, w, h, 50);

Response.Write(path + @"/" + name + _tp);

}

catch (Exception)

{

Response.Write("哎呦,出错了。");

Response.End();

}

}

}

}

时间: 2024-10-02 10:46:56

asp.net 基于ajaxfileupload.js 实现文件异步上传的相关文章

使用AjaxFileUpload.js实现文件异步上传

ajax是无法提交文件的,所以在上传图片并预览的时候,我们经常使用Ifame的方法实现看似异步的效果.但是这样总不是很方便的,AjaxFilleUpload.js对上面的方法进行了一个包装,使得我们不用去管理Iframe的一系列操作,也不用影响我们的页面结构,实现异步的文件提交. html: <input type="file" name="upload" hidden="hidden" id="file_upload"

使用AjaxFileUpload.js实现文件异步上?

ajax是无法提交文件的,所以在上传图片并预览的时候,我们常常使用Ifame的方法实现看似异步的效果.可是这样总不是非常方便的,AjaxFilleUpload.js对上面的方法进行了一个包装,使得我们不用去管理Iframe的一系列操作,也不用影响我们的页面结构,实现异步的文件提交. html: <input type="file" name="upload" hidden="hidden" id="file_upload"

百度 flash html5自切换 多文件异步上传控件webuploader基本用法

双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit"> 若页面需默认用ie兼容内核,增加标签:<meta name="renderer" content="ie-comp"> 若页面需默认用ie标准内核,增加标签

SpringMVC + AJAX 实现多文件异步上传

转自:https://www.jianshu.com/p/f3987f0f471f 今天,我就这个问题来写一篇如何用 SpringMVC + AJAX 实现的多文件异步上传功能.基本的代码还是沿用上篇文章中所用到的项目,需要的朋友可以点击前面的链接查看.在这里只贴出关键代码. 首先我们要准备一个 JS 文件,即:ajaxfileupload.js,它需要用到 jQuery,所以我们还需要准备 jQuery 的库,两个文件在文末尾都有链接提供下载. JSP 关键代码: <li> <div&

HTML5实现图片文件异步上传

利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构.下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段.我这边的效果预览: 1.文件未选择 2.文件已选择 HTML代码部分: 思路:下面代码中我利用css的z-index属性将input="file"标签隐藏在了id=btnSelect元素下面,通过触发a标签的点击后,弹出文件选择框.下面的masklayer用于点击确认按钮后的弹出层,避免用户重复点击确认按钮. <div id

文件的上传(表单上传和ajax文件异步上传)

一.表单上传: html客户端部分: <form action="upload.ashx" method="post" enctype="multipart/form-data"> 选择文件:<input type="file" name="file1" /><br /> <input type="submit" value="上传&q

使用ajaxfileupload.js文件异步上传文件

在服务器端做文件上传的过程中,如果使用web服务器短端的上传控件去上传文件的话,会导致页面刷新一次,这样对用户的体验就不是很友好了.ajaxfileupload.js是一款jQuery的异步上传文件插件,使用简单且容易上手. 前置条件:ajaxfileupload.js文件,百度下载一个就行. JS引用: <script src="/Content/JQueryJS/jquery-2.1.1.js"></script> <script src="

HTML5 文件异步上传 — h5uploader.js

原文地址:http://imziv.com/blog/article/read.htm?id=62 之前写过一篇H5异步文件上传的文章, 但是很多朋友看着我的这个教程还是出现很多问题,文章写的不是很好,比较早了.其实通过H5做异步上传已经非常简单了,通过查看文档,便可以很轻松的完成这个功能,当然,如果你不愿意查看文档自己动手的话,那么就用插件咯.h5uploader是我最近封装的HTML5上传插件,代码才白来行,使用的话也比较简单,支持文件大小,类型,progress等等功能.本篇教程,将向你展

ASP.NET MVC 文件异步上传问题处理

最近在做一个网站,用asp.net MVC4.0来开发,今天遇到了个小问题,通过查找相关渠道解决了,在这里把这个问题写出来,问题非常简单,不喜勿喷,mark之希望可以给遇到相同问题的初学者一点帮助.我要实现文件的异步上传,前端提交的文件后台老是获取不到.我前端是这样写的: @using (Ajax.BeginForm("UpdateNewInfo", "Home", new AjaxOptions() { HttpMethod = "post",