2 ssj 8551 ssj_8551 于 2016.01.28 14:41 提问

上传文件时的错误提示如何更友好的提示?

图片说明

如图所示,上传文件出错的提示是来自服务器的信息,如何将该错误提示用js改写为更友好的提示界面?

js代码片段:

function uploadFile(){
var strFileName = $('#file-scorm').val();
if(strFileName.length>0){
if(!IsValidFileExtention(strFileName,["zip"])){
alert("文件格式不正确!");
return false;
}else{
var url = "/server/train/course/info/update/scormstatus.json";
$.getJSON(url,{id:id},function(rtn){});
var file = document.getElementById('file-scorm').files[0];
if(file){
$('#file-name').text(file.name);
}
$('#creator_id').val(memberId);
$('#callback-url').val($.cookie('callback_url').replace(/\"/g,"") + "/server/callback/train/course/section/scorm/save.json");
var url_proxy = $.cookie('reosurce_proxy').replace(/\"/g,"");
var formData = new FormData();
formData.append("id",id);
formData.append("creator_id",memberId);
formData.append("UPLOAD-CALLBACK",$('#callback-url').val());
formData.append("UPLOAD-COMMAND","dfs,scorm");
formData.append("file",document.getElementById('file-scorm').files[0]);
$("#dialog_upload").dialog("open");
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", url_proxy);
xhr.send(formData);
}
}else{
window.location.href = "add_scorm_step3.html?id=" + id;
}
}

function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
var anchor = $('#dialog_upload');
$('.progress-bar', anchor).css('width', percentComplete.toString() + '%').html(percentComplete.toString() + '%');
}
else {
$('.progress-bar', "#dialog_upload").css('width','0%').html('0%');
$('#file-status').text("上传失败");
}
}

function uploadComplete(evt) {
/* 服务器端返回响应时候触发event事件*/
if(evt.target.status==200){
$("#dialog_upload").dialog("close");
window.location.href = "add_scorm_step3.html?id=" + id;
}else{
$('.progress-bar', "#dialog_upload").css('width','0%').html('0%');
$('#file-status').text("上传失败");
alert(evt.target.responseText);
}
}
function uploadFailed(evt) {
alert("文件上传失败.");
}
function uploadCanceled(evt) {
alert("文件上传被取消.");
}

1个回答

showbo
showbo   Ds   Rxr 2016.01.28 18:02
已采纳


    function uploadComplete(evt) {
        /* 服务器端返回响应时候触发event事件*/
        if (evt.target.status == 200) {
            $("#dialog_upload").dialog("close");
            window.location.href = "add_scorm_step3.html?id=" + id;
        } else {
            $('.progress-bar', "#dialog_upload").css('width', '0%').html('0%');
            $('#file-status').text("上传失败");
            ///////alert(evt.target.responseText);//不要直接输出返回的内容
            var m =/<title>([\s\S]+?)<\/title>/i.exec(evt.target.responseText);//正则提取返回的html中的title标签内容
            alert('上传失败'+(m?m[1]:''));//有返回则输出title间内容
        }
    }
showbo
showbo 回复北堂棣: 记得采纳
2 年多之前 回复
ssj_8551
ssj_8551 谢谢,已经解决了
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
Struts2实现文件的上传并实现错误提示
1.首先建一个project,添加struts2的必备jar包,在src目录下建一个struts.xml来配置struts2.内容可以从struts2-core的jar包下找到struts-default.xml。 2.新建一个upload.jsp
如何让网页显示友好的错误信息页面
原文链接:http://sh.yuloo.com/it/wyjq/71697.shtml大多数用户看到”该页无法显示”,”服务器内部错误”等默认错误提示信息会立马关闭浏览器窗口,我们为什么不能自定义一下呢?让用户从错误信息中得到真正的帮助?错误信息的页面应该做到以下几点:     1.给普通访客友好提示。告诉他们这是怎么了,简单,再简单,不要出现技术专业词汇,同时告诉他们一些建议如何避免和解决当前
asp.net mvc当出现错误时如何实现友好错误提示
前两天刚写过一篇asp.net mvc实现 错误异常记录功能的实现。考虑到在我以前的 webform 项目中是有当出现500 错误时有友好提示功能的,也打算在 MVC 中实现此功能。在我的 LogExceptionAttribute 类的 OnException 方法中增加以下代码: //通知MVC框架,现在这个异常已经被我处理掉,你不需要将黄页显示给用户 filterContext.E
Web应用设置统一错误友好界面
为应用设置统一的错误友好界面,一般在web.xml中设置如下代码:     404   /404.jsp       500   /500.jsp   但是设置后发现,浏览器不能正常跳转404.jsp或500.jsp,这是因为用户的浏览器设置问题,出错之后,浏览器会给出一个统一的错误界面,为了能够显示自己的错误友好界面,需要在404.jsp及500.jsp中加
程序崩溃时拦截并做出友好的提示给用户
原文地址:http://blog.csdn.net/zhaokaiqiang1992     虽然我们的程序在正式上线之前,都会经过严格的测试,从而保证程序的健壮性和良好的用户体验,但是,一个人的测试或者是几个人的测试团队,都不能和上万甚至数十万的用户相比。因此,前期刚上线的程序在用户手里被玩崩了,也是很常见的事,但是,如果我们不做特殊处理,系统自带的程序崩溃提示真的太吓人了,用户看到之后会不知
友好提示
//====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 function ale() { //弹出一个对话框 alert("提示信息!"); } //弹出一个询问框,有确定和取消按钮 function firm() { //利用对话框返回的值 (true 或者 false) if (confir
配置项目的错误友好提示页面
在web.xml中配置如下内容:可以按照异常类型和错误码做为不同的异常区分 <error-page> <exception-type>java.lang.Exception</exception-type> <!-- location为视图解析器解析后,页面所在的地址--> <location>/uncaughtException</locati
web应用设置统一友好错误页面,处理404,500等错误
web应用在使用的过程中地址输入错误或后台出现没有捕获的异常,会导致出现404,500等错误,怎样给用户一个统一友好错误页面,是一个提高系统可用度的关键问题。要实现这样的功能可能有很多,如设置服务器的error page,在框架中处理,如使用spring 的SimpleMappingExceptionResolver,下面要介绍的是最简单易用的方法,设置web.xml的error page,添加如
PHP捕捉错误并显示友好信息的方法(不使用try...catch)
2012-11-29 杨勇 bjash@126.com ,思远 首先,捕捉错误,不能使用try{...}catch(){}的方式,PHP里面的try{...}catch是需要自己抛出异常才能捕获的,区别于其他语言。 其次,可以使用如下的方法实现同样的效果: error_reporting(0);//设置屏蔽系统错误提示,放页首 //$string = file_get_contents("
ajax提交等待服务器响应友好提示信息的实现
ajax提交等待服务器响应友好提示信息的实现