ASP.NET_webuploader例子

最新推荐文章于 2024-05-10 15:34:00 发布

.NET-小棠

最新推荐文章于 2024-05-10 15:34:00 发布

阅读量191

点赞数

文章标签： c# asp.net

本文链接：https://blog.csdn.net/qq_33285360/article/details/116974842

版权

使用webuploader例子

webuploader类库

下载地址：http://fex.baidu.com/webuploader/r

前端：

<!DOCTYPE html>

<html>
<head runat="server">
    <title>使用webuploader例子</title>
    <link href="js/webuploader/webuploader.css" rel="stylesheet" type="text/css" />
    <script src="js/webuploader/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="js/webuploader/webuploader.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="uploader-demo">
            <!--用来存放item-->
            <div id="fileList" class="uploader-list"></div>
            <div id="filePicker">选择图片</div>
        </div>

        <script type="text/javascript">
            // 初始化Web Uploader
            var uploader = WebUploader.create({
                auto: true, // 选完文件后，是否自动上传。
                swf: 'js/Uploader.swf', // swf文件路径
                server: 'server/fileupload.ashx', // 文件接收服务端。
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#filePicker',
                accept: {// 只允许选择图片文件。
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                }
            });

            // 当有文件添加进来的时候
            uploader.on('fileQueued', function (file) {
                var $li = $(
            '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
            '</div>'
            ),
        $img = $li.find('img');


                // $list为容器jQuery实例
                $("#fileList").append($li);

                // 创建缩略图
                // 如果为非图片文件，可以不用调用此方法。
                // thumbnailWidth x thumbnailHeight 为 100 x 100
                uploader.makeThumb(file, function (error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }

                    $img.attr('src', src);
                }, 100, 100);
            });

            // 文件上传过程中创建进度条实时显示。
            uploader.on('uploadProgress', function (file, percentage) {
                var $li = $('#' + file.id),$percent = $li.find('.progress span');

                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('<p class="progress"><span></span></p>')
                .appendTo($li)
                .find('span');
                }

                $percent.css('width', percentage * 100 + '%');
            });

            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on('uploadSuccess', function (file, response) {
                $('#' + file.id).addClass('upload-state-done');
            });

            // 文件上传失败，显示上传出错。
            uploader.on('uploadError', function (file) {
                var $li = $('#' + file.id),
        $error = $li.find('div.error');

                // 避免重复创建
                if (!$error.length) {
                    $error = $('<div class="error"></div>').appendTo($li);
                }

                $error.text('上传失败');
            });

            // 完成上传完了，成功或者失败，先删除进度条。
            uploader.on('uploadComplete', function (file) {
            
                $('#' + file.id).find('.progress').remove();
            });

        </script>
    </form>
</body>
</html>

后端 fileupload.ashx

<%@ WebHandler Language="C#" Class="fileupload" %>

using System;
using System.Web;
using System.IO;//引用
using System.Text;//引用
using System.Data;//引用

public class fileupload : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";

        //文件名称
        string fileName = Guid.NewGuid().ToString();
        //原图路径
        string ImgPath = "../upload/works/" + fileName + Path.GetExtension(context.Request.Files[0].FileName); 
        //保存图片
        context.Request.Files[0].SaveAs(context.Server.MapPath(ImgPath));

        //返回数据
        StringBuilder json = new StringBuilder();
        json.Append("{");
        json.Append("\"jsonrpc\":\"2.0\",");
        json.Append("\"result\":null,");
        json.AppendFormat("\"fileName\":\"{0}\",", fileName);
        json.AppendFormat("\"filePath\":\"{0}\"", ImgPath.Replace("../", ""));
        json.Append("}");

        //输出数据
        context.Response.Write(json.ToString());
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

例子源码：https://download.csdn.net/download/qq_33285360/18826438

.NET-小棠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ASP.NET_webuploader例子

使用webuploader例子webuploader类库下载地址：http://fex.baidu.com/webuploader/r前端：<!DOCTYPE html><html><head runat="server"> <title>使用webuploader例子</title> <link href="js/webuploader/webuploader.css" rel="stylesheet" typ
复制链接

扫一扫