异步上传图片至服务器

需引用两个js文件：jquery-1.4.1.min.js和jquery.jUploader-1.01.min.js

 

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

后台代码

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

 

<script type="text/javascript">
        // 设置全局配置
        $.jUploader.setDefaults({
            cancelable: true,
            allowedExtensions: ['jpg', 'png', 'gif'],
            messages: {
                upload: '请点此处预先选择图片上传',
                cancel: '取消',
                emptyFile: "{file} 为空，请选择一个文件.",
                invalidExtension: "{file} 后缀名不合法. 只有 {extensions} 是允许的.",
                onLeave: "文件正在上传，如果你现在离开，上传将会被取消。"
            }
        });
        // 例子1
        function demo1() {
            $.jUploader({
                button: 'upload-button1', // 这里设置按钮id
                action: 'test.aspx?test_cancel=1', // 这里设置上传处理接口，这个加了参数test_cancel=1来测试取消

                // 上传完成事件
                onComplete: function (fileName, response) {
                    // response是json对象，格式可以按自己的意愿来定义，例子为： { success: true, fileUrl:'' }
                    if (response.success) {
                        //$('#photo1').attr('src', response.fileUrl);  //显示图片路径 
                            $2("urlbg").value=response.fileUrl;  
                            alert("上传成功！");                     // alert( response.fileUrl);   弹出图片的路径
                        // 这里说明一下，一般还会在图片附近加添一个hidden的input来存放这个上传后的文件路径(response.fileUrl)，方便提交到服务器保存
                    } else {
                        alert('上传失败!请上传后缀名为.jpg, .jpeg, .png的图片');
                    }
                }
            });
        }
        $(function () {
            // 初始化
            demo1();
        });

    </script>

<>

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

页面代码：

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

<script type="text/javascript">
        // 设置全局配置
        $.jUploader.setDefaults({
            cancelable: true,
            allowedExtensions: ['jpg', 'png', 'gif'],
            messages: {
                upload: '请点此处预先选择图片上传',
                cancel: '取消',
                emptyFile: "{file} 为空，请选择一个文件.",
                invalidExtension: "{file} 后缀名不合法. 只有 {extensions} 是允许的.",
                onLeave: "文件正在上传，如果你现在离开，上传将会被取消。"
            }
        });
        // 例子1
        function demo1() {
            $.jUploader({
                button: 'upload-button1', // 这里设置按钮id
                action: 'test.aspx?test_cancel=1', // 这里设置上传处理接口，这个加了参数test_cancel=1来测试取消

                // 上传完成事件
                onComplete: function (fileName, response) {
                    // response是json对象，格式可以按自己的意愿来定义，例子为： { success: true, fileUrl:'' }
                    if (response.success) {
                        //$('#photo1').attr('src', response.fileUrl);  //显示图片路径 
                            $2("urlbg").value=response.fileUrl;           //传回图片的路径 
                            alert("上传成功！");                     // alert( response.fileUrl);   弹出图片的路径
                        // 这里说明一下，一般还会在图片附近加添一个hidden的input来存放这个上传后的文件路径(response.fileUrl)，方便提交到服务器保存
                    } else {
                        alert('上传失败!请上传后缀名为.jpg, .jpeg, .png的图片');
                    }
                }
            });
        }
        $(function () {
            // 初始化
            demo1();
        });

    </script>

<>页面添加一个按钮即可实现上传。