html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>测试demo</title>

    <script src="jqueryeasyUI/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
        #txtFileName
        {
            width: 300px;
        }
        .btnsubmit
        {
            border-bottom: #cc4f00 1px solid;
            border-left: #ff9000 1px solid;
            border-top: #ff9000 1px solid;
            border-right: #cc4f00 1px solid;
            text-align: center;
            padding: 2px 10px;
            line-height: 16px;
            background: #e36b0f;
            height: 24px;
            color: #fff;
            font-size: 12px;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">

        $(function () {
            var button = $('#btnUp'), interval;

            var ajaxUpload = new AjaxUpload(button, {
                //action: 'upload-test.php',文件上传服务器端执行的地址
                action: 'AjaxuploadHandler.ashx',
                name: 'myfile',
                onSubmit: function (file, ext) {
                    if (!(ext && /^(jpg|jpeg|JPG|JPEG)$/.test(ext))) 
                    {
                        alert('图片格式不正确,请选择 jpg 格式的文件!', '系统提示');
                        return false;
                    }

                    // change button text, when user selects file
                    button.text('上传中');

                    // If you want to allow uploading only 1 file at time,
                    // you can disable upload button
                    this.disable();

                    // Uploding -> Uploading. -> Uploading...
                    interval = window.setInterval(function () {
                        var text = button.text();
                        if (text.length < 10) {
                            button.text(text + '|');
                        } else {
                            button.text('上传中');
                        }
                    }, 200);
                    return true;
                },
                onComplete: function (file, response) {

                    //file 本地文件名称,response 服务器端传回的信息
                   button.text('上传图片(只允许上传JPG格式的图片,大小不得大于150K)');

                    window.clearInterval(interval);

                    // enable upload button
                    this.enable();
                  
                   
                    var k = response.replace("<pre>", "").replace("</pre>", "");

                    if (k === '-1') {
                        alert('您上传的文件太大啦!请不要超过150K');
                    }
                    else {
                        //  alert("服务器端传回的串:" + k);
                        //alert("本地文件名称:" + file);

                        k = k.substring(k.lastIndexOf('>')+1, k.length);
                        $("#txtFileName").val(k);
                        $("<img  width='50' height='50' />").appendTo($('#imglist')).attr("src", k);
                    }
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       <input type="text" id="txtFileName" style="width: 300px;" />
        <div id="btnUp" style="width: 250px;" class="btnsubmit">
            浏览</div>
        <div id="imglist">
        </div>
    </div>
    </form>
</body>
<script src="js/ajaxupload.3.91.js" type="text/javascript"></script>
</html>
View Code

相关文章:

  • 2021-11-20
  • 2022-01-01
  • 2021-07-01
  • 2021-04-23
  • 2021-07-11
  • 2021-05-18
  • 2022-01-07
  • 2021-07-18
猜你喜欢
  • 2021-12-18
  • 2022-12-23
  • 2021-12-27
  • 2021-07-11
  • 2022-12-23
  • 2022-01-01
  • 2021-12-05
相关资源
相似解决方案