Asp.net 图片上传到服务器，并立即显示出来(2)

Question

asp.net图片上传

Answer 1

你需要第三方插件，如：uploadify

Answer 2

我用百度的webuploader：http://fex-team.github.io/webuploader/

Answer 3

用到了一个插件叫jquery.form <script type="text/javascript">
        window.jQuery || document.write("<script src='/assets/js/jquery.js'>" + "<" + "/script>");
    </script>
<script src="/assets/js/jquery.form.min.js"></script>
<script type="text/javascript">
    $(function () {
       
        var options={
            url: "/DataHandle/BatchAddStudent",　　　　　　//form提交数据的地址
            type: "POST",　　　  //form提交的方式(method:post/get)
            beforeSend: function () {
                var percentVal = '0%';
                $("#buttonUpload").prop("disabled", "disabled");
                $(".progress-bar").width(percentVal);
            },
            uploadProgress: function (event, position, total, percentComplete) {
                var percentVal = 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 () {
            var filename = $("#filestudent").val();
            if (filename == "")
            {
                bootbox.alert("请选择一个导入的文件！");
                return false;
            }
            var ex = filename.substring(filename.lastIndexOf(".")).toLowerCase();
            if (ex != ".xls")
            {
                bootbox.alert("导入的文件必须为xls文件！");
                return false;
            }
            $("#form1").ajaxSubmit(options);
            return false;
        });
    });
</script>

Answer 4

     上传成功后用jquery ajax异步刷新一下img的src     或者嫌麻烦的话就用上传控件  再弄UpdatePanel  表面看起来也是没有刷新的

Answer 5

建议楼主了解一下这个，异步表单的提交，不管是上传文档还是上传图片
这个原理还是使用的IFRAME提交的，会破坏原有页面表单结构，不熟悉还是少用

Answer 6

最简单的用上传iframe页，上传完成用js刷新父页面就是