Web Uploader上传大文件就出错。。。另外显示不了进度条。求助

MoshangYanYu 2016-09-01 10:10:07

Web Uploader插件上传几百M的大文件就出错，提示上传失败。Web.Config里面已经做过配置。



<system.web>

		<compilation debug="true" targetFramework="4.5" />

		<httpRuntime targetFramework="4.5" maxRequestLength="1048576" executionTimeout="6000"/>

	</system.web>

	<system.webServer>

		<security>

			<requestFiltering>

				<requestLimits maxAllowedContentLength="1048576">



				</requestLimits>

			</requestFiltering>

		</security>

	</system.webServer>

前台JS代码如下：



	var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";

		$(function () {

			var $ = jQuery,

			$list = $('#fileList'),

			// 优化retina, 在retina下这个值是2

			ratio = window.devicePixelRatio || 1,

			// 缩略图大小

			thumbnailWidth = 90 * ratio,

			thumbnailHeight = 90 * ratio,

			// Web Uploader实例

			uploader;

			uploader = WebUploader.create({

				// 选完文件后，是否自动上传。

				auto: false,



				// swf文件路径

				swf: applicationPath + '/js/Uploader.swf',



				// 文件接收服务端。

				server: applicationPath + '/Controller/fileupload.ashx',



				// 选择文件的按钮。可选。

				// 内部根据当前运行是创建，可能是input元素，也可能是flash.

				pick: '#filePicker',



				//只允许选择图片

				//accept: {

				//	title: 'Images',

				//	extensions: 'gif,jpg,jpeg,bmp,png',

				//	mimeTypes: 'image/*'

				//}

			});



			// 当有文件添加进来的时候

			uploader.on('fileQueued', function (file) {

				var $li = $(

						'<div id="' + file.id + '" class="cp_img">' +

							'<img>' +

						'<div class="cp_img_jian"></div></div>'

						),

					$img = $li.find('img');





				// $list为容器jQuery实例

				$list.append($li);



				// 创建缩略图

				// 如果为非图片文件，可以不用调用此方法。

				// thumbnailWidth x thumbnailHeight 为 100 x 100

				uploader.makeThumb(file, function (error, src) {

					if (error) {

						$img.replaceWith('<span>不能预览</span>');

						return;

					}



					$img.attr('src', src);

				}, thumbnailWidth, thumbnailHeight);

			});



			// 文件上传过程中创建进度条实时显示。

			uploader.on('uploadProgress', function (file, percentage) {

				var $li = $('#' + file.id);

				var txtState = (percentage * 100).toFixed(0) + '%';

				$li.find('.file_state').text(txtState);

				$li.find('.file_state').attr("title", txtState);

				$li.find('.file-mask').css('width', percentage * 100 + '%');

				$(".layui-layer-close").hide();

			});



			// 文件上传成功，给item添加成功class, 用样式标记上传成功。

			uploader.on('uploadSuccess', function (file, response) {

				alert("上传成功");

			});



			// 文件上传失败，显示上传出错。

			uploader.on('uploadError', function (file) {

				alert("上传失败");

				 //避免重复创建

				if (!$error.length) {

					$error = $('<div class="error"></div>').appendTo($li);

				}

				$error.text('上传失败');

			});



			// 完成上传完了，成功或者失败，先删除进度条。

			uploader.on('uploadComplete', function (file) {

				$('#' + file.id).find('.progress').remove();

			});



			//所有文件上传完毕

			uploader.on("uploadFinished", function () {

				//提交表单



			});



			//开始上传

			$("#ctlBtn").click(function () {

				uploader.upload();

			});



			//显示删除按钮

			$(".cp_img").live("mouseover", function () {

				$(this).children(".cp_img_jian").css('display', 'block');



			});

			//隐藏删除按钮

			$(".cp_img").live("mouseout", function () {

				$(this).children(".cp_img_jian").css('display', 'none');



			});

			//执行删除方法

			$list.on("click", ".cp_img_jian", function () {

				var Id = $(this).parent().attr("id");

				uploader.removeFile(uploader.getFile(Id, true));

				$(this).parent().remove();

			});

		});

HTML代码如下：



<body>

	<div id="fileList"></div>

	<!--这是存放图片的容器-->

	<div class="cp_img_jia" id="filePicker">请选择文件</div>

	<!--这是上传按钮-->

	<button id="ctlBtn">上传文件</button>

</body>

后台ashx代码如下：



private void SaveFile()

		{

			string localPath = Path.Combine(HttpRuntime.AppDomainAppPath, "File");//文件保存目录

			HttpFileCollection files = HttpContext.Current.Request.Files;

			string _result="";

			//判断目录是否存在，不存在则创建目录

			if (!Directory.Exists(localPath))

			{

				Directory.CreateDirectory(localPath);

			}

			var suffix = files[0].ContentType.Split('/');//获取客户端发送的文件的MIME内容类型

			string exName = suffix[1];//获取文件后缀名

			string filename = HttpContext.Current.Request["name"];//获取文件名

			string fullPathName = localPath + "\\" + filename;//路径+文件名

			try

			{

				files[0].SaveAs(fullPathName);//保存文件

			}

			catch (Exception)

			{

				_result = "{error:上传失败}";

				throw;

			}

			 _result= "{success:上传成功}";

			HttpContext.Current.Response.Write(_result);

		}