asp.net core2 使用百度webupload上传图片

    上传图片的功能尝试了一个下午,竟然没有成功,用jquery.form.js 以及 formData 上传出现各种状况,最后找了百度的webupload试一下,神奇的成功了。

    上代码。

 

     视图

<link rel="stylesheet" type="text/css" href="~/webupload/webuploader.css">

<script type="text/javascript" src="~/webupload/webuploader.js"></script>

 

 <div id="uploader" class="wu-example">

                        <input type="hidden" value="hid_blog_image" />
                        <div id="thelist" class="uploader-list"></div>
                        <a href="javascript:void(0)" οnclick="remove_pic()" id="minus">
                            <span class="glyphicon glyphicon-remove"></span>
                        </a>
                        <!--用来存放文件信息-->
                        <div class="btns">
                            <div id="picker">选择文件</div>
                            <button id="ctlBtn" class="btn btn-default">开始上传</button>
                        </div>

                    </div>

 

 

var BASE_URL = '';

    var uploader = WebUploader.create({

        auto: true,

        // swf文件路径
        swf: BASE_URL + '/webupload/Uploader.swf',

        // 文件接收服务端。
        server: '/Upload/Upload',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建,可能是input元素,也可能是flash.
        pick: '#picker',

        // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
        resize: false
    });

    uploader.on('fileQueued', function (file) {

        $list = $('#thelist');
        $list.append('<div id="' + file.id + '" class="item">' +
            '<h4 class="info">' + file.name + '</h4>' +
            '<p class="state">等待上传...</p>' +
            '</div>');
    });

    uploader.on('uploadSuccess', function (file) {
        $('#' + file.id).find('p.state').text('已上传');

    });

    uploader.on('uploadError', function (file) {
        $('#' + file.id).find('p.state').text('上传出错');
    });

    uploader.on('uploadComplete', function (file) {
        $('#' + file.id).find('.progress').fadeOut();
    });

    uploader.on('uploadAccept', function (file, response) {
        console.log(response) //服务器返回的数据
        var data = eval(response);
        if (data.result == 'success') {
            $('#thelist').html('<img src="' + data.data.file + '" style="width:200px;" />');
            $('#hid_blog_image').val(data.data.file);
            $('#minus').show();
        }
    });

    function remove_pic() {
        $('#thelist').html('');
        $('#hid_blog_image').val('');
        $('#minus').hide();
    }
 

 

   

后端:

using core_admin.Models;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;

 

 

 

public class UploadController : Controller

    {

        [HttpGet]        
        public IActionResult Index()
        {
            return View();
        }

        
        [HttpPost]
        public string Upload()
        {
            MyResult result = new MyResult();
            try
            {
                var form = Request.Form;
                Hashtable hash = new Hashtable();

                IFormFileCollection cols = Request.Form.Files;
                if (cols == null || cols.Count == 0)
                    return "file not selected";
                foreach (IFormFile file in cols)
                {

                    var new_path = Guid.NewGuid() + System.IO.Path.GetExtension(file.FileName);
                    new_path = Path.Combine("uploads/images/", new_path);
                    var path = Path.Combine(
                         Directory.GetCurrentDirectory(), "wwwroot", new_path);

                    using (var stream = new FileStream(path, FileMode.Create))
                    {
                        file.CopyTo(stream);
                        hash.Add("file", "/" + new_path);
                    }

                }
                result.data = hash;
                result.result = "success";
            } catch (Exception ex)
            {
                result.err_msg = ex.Message;
                result.result = "error";
            }

            return JsonConvert.SerializeObject(result);
        }
        
    }

 

用到了我的一个类:

public class MyResult
    {
        public string result { get; set; }

        public string err_msg { get; set; }

        public int total { get; set; }

        public object data { get; set; }

        public string page1 { get; set; }

        public string page2 { get; set; }
    }

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ying1979

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值