Web Uploader上传大文件就出错。。。另外显示不了进度条。求助
Web Uploader插件上传几百M的大文件就出错,提示上传失败。Web.Config里面已经做过配置。
前台JS代码如下:
HTML代码如下:
后台ashx代码如下:
请教各位,为什么上传大文件(几百M左右)会失败?以及上传过程中没有进度条?谢谢各位!
<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);
}
请教各位,为什么上传大文件(几百M左右)会失败?以及上传过程中没有进度条?谢谢各位!
...全文
相关推荐
java web 大文件上传源代码,找了好久改了下,这是最完整的
java web 大文件上传源代码,找了好久,分享给大家,加入了缺少的jar包,这是目前为止找到的最为完整的项目了,所有的java类,jar包,数据表脚本全部都齐全了。
chunk-uploader:SpringBoot+Redis 实现大文件分片上传,断点续传,急速秒传。前端使用vue-simpler-uploader实现文件并发上传
大文件分片上传 SpringBoot+Redis 大文件实现文件分片上传,断点续传,急速秒传。前端使用vue-simpler-uploader实现文件并发上传。
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
主要介绍了移动端 Vue+Vant 的Uploader 实现 上传、压缩、旋转图片功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
百度Web Uploader组件实现文件上传之分片上传(一)
NULL 博文链接:https://1197581932.iteye.com/blog/2397870
php结合web uploader插件实现分片上传文件
主要为大家详细介绍了php结合web uploader插件实现分片上传文件, 采用大文件分片并发上传,极大的提高了文件上传效率,感兴趣的小伙伴们可以参考一下


