问题描述
页面不刷新直接上传到服务器，并且立即显示出来
解决方案
解决方案二：
你需要第三方插件，如：uploadify
解决方案三：
我用百度的webuploader：
解决方案四：
用到了一个插件叫jquery.form<scripttype="text/javascript">window.jQuery||document.write("<scriptsrc='/assets/js/jquery.js'>"+"<"+"/script>");</script><scriptsrc="/assets/js/jquery.form.min.js"></script><scripttype="text/javascript">$(function(){varoptions={url:"/DataHandle/BatchAddStudent", //form提交数据的地址type:"POST", //form提交的方式(method:post/get)beforeSend:function(){varpercentVal='0%';$("#buttonUpload").prop("disabled","disabled");$(".progress-bar").width(percentVal);},uploadProgress:function(event,position,total,percentComplete){varpercentVal=percentComplete+'%';$(".progress-bar").width(percentVal);},target:"#output", //服务器返回的响应数据显示在元素(Id)号确定beforeSubmit:function(){}, //提交前执行的回调函数success:function(data){$("#img1").attr("src",data);//给图片标签SRC赋值，这个data是从服务器端返回的上传到服务器的路径$("#filestudent").val("");bootbox.alert(data.message);$(".progress-bar").width("100%");$("#buttonUpload").removeAttr("disabled");},error:function(xhr){$("#buttonUpload").prop("disabled","disabled");$(".progress-bar").width("0");},dataType:"json", //服务器返回数据类型clearForm:false, //提交成功后是否清空表单中的字段值restForm:true, //提交成功后是否重置表单中的字段值，即恢复到页面加载时的状态timeout:6000 //设置请求时间，超过该时间后，自动退出请求，单位(毫秒)。 }$("#buttonUpload").click(function(){varfilename=$("#filestudent").val();if(filename==""){bootbox.alert("请选择一个导入的文件！");returnfalse;}varex=filename.substring(filename.lastIndexOf(".")).toLowerCase();if(ex!=".xls"){bootbox.alert("导入的文件必须为xls文件！");returnfalse;}$("#form1").ajaxSubmit(options);returnfalse;});});</script>
解决方案五：
上传成功后用jqueryajax异步刷新一下img的src或者嫌麻烦的话就用上传控件再弄UpdatePanel表面看起来也是没有刷新的
解决方案六：
引用3楼wangjun8868的回复:
用到了一个插件叫jquery.form<scripttype="text/javascript">window.jQuery||document.write("<scriptsrc='/assets/js/jquery.js'>"+"<"+"/script>");</script><scriptsrc="/assets/js/jquery.form.min.js"></script><scripttype="text/javascript">$(function(){varoptions={url:"/DataHandle/BatchAddStudent", //form提交数据的地址type:"POST", //form提交的方式(method:post/get)beforeSend:function(){varpercentVal='0%';$("#buttonUpload").prop("disabled","disabled");$(".progress-bar").width(percentVal);},uploadProgress:function(event,position,total,percentComplete){varpercentVal=percentComplete+'%';$(".progress-bar").width(percentVal);},target:"#output", //服务器返回的响应数据显示在元素(Id)号确定beforeSubmit:function(){}, //提交前执行的回调函数success:function(data){$("#img1").attr("src",data);//给图片标签SRC赋值，这个data是从服务器端返回的上传到服务器的路径$("#filestudent").val("");bootbox.alert(data.message);$(".progress-bar").width("100%");$("#buttonUpload").removeAttr("disabled");},error:function(xhr){$("#buttonUpload").prop("disabled","disabled");$(".progress-bar").width("0");},dataType:"json", //服务器返回数据类型clearForm:false, //提交成功后是否清空表单中的字段值restForm:true, //提交成功后是否重置表单中的字段值，即恢复到页面加载时的状态timeout:6000 //设置请求时间，超过该时间后，自动退出请求，单位(毫秒)。 }$("#buttonUpload").click(function(){varfilename=$("#filestudent").val();if(filename==""){bootbox.alert("请选择一个导入的文件！");returnfalse;}varex=filename.substring(filename.lastIndexOf(".")).toLowerCase();if(ex!=".xls"){bootbox.alert("导入的文件必须为xls文件！");returnfalse;}$("#form1").ajaxSubmit(options);returnfalse;});});</script>
建议楼主了解一下这个，异步表单的提交，不管是上传文档还是上传图片
解决方案七：
引用5楼lizeyuan8238386的回复:
Quote: 引用3楼wangjun8868的回复:
用到了一个插件叫jquery.form<scripttype="text/javascript">window.jQuery||document.write("<scriptsrc='/assets/js/jquery.js'>"+"<"+"/script>");</script><scriptsrc="/assets/js/jquery.form.min.js"></script><scripttype="text/javascript">$(function(){varoptions={url:"/DataHandle/BatchAddStudent", //form提交数据的地址type:"POST", //form提交的方式(method:post/get)beforeSend:function(){varpercentVal='0%';$("#buttonUpload").prop("disabled","disabled");$(".progress-bar").width(percentVal);},uploadProgress:function(event,position,total,percentComplete){varpercentVal=percentComplete+'%';$(".progress-bar").width(percentVal);},target:"#output", //服务器返回的响应数据显示在元素(Id)号确定beforeSubmit:function(){}, //提交前执行的回调函数success:function(data){$("#img1").attr("src",data);//给图片标签SRC赋值，这个data是从服务器端返回的上传到服务器的路径$("#filestudent").val("");bootbox.alert(data.message);$(".progress-bar").width("100%");$("#buttonUpload").removeAttr("disabled");},error:function(xhr){$("#buttonUpload").prop("disabled","disabled");$(".progress-bar").width("0");},dataType:"json", //服务器返回数据类型clearForm:false, //提交成功后是否清空表单中的字段值restForm:true, //提交成功后是否重置表单中的字段值，即恢复到页面加载时的状态timeout:6000 //设置请求时间，超过该时间后，自动退出请求，单位(毫秒)。 }$("#buttonUpload").click(function(){varfilename=$("#filestudent").val();if(filename==""){bootbox.alert("请选择一个导入的文件！");returnfalse;}varex=filename.substring(filename.lastIndexOf(".")).toLowerCase();if(ex!=".xls"){bootbox.alert("导入的文件必须为xls文件！");returnfalse;}$("#form1").ajaxSubmit(options);returnfalse;});});</script>建议楼主了解一下这个，异步表单的提交，不管是上传文档还是上传图片
这个原理还是使用的IFRAME提交的，会破坏原有页面表单结构，不熟悉还是少用
解决方案八：
最简单的用上传iframe页，上传完成用js刷新父页面就是