码迷,mamicode.com
首页 > Web开发 > 详细

图片上传

时间:2016-08-06 23:32:49      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:

1、Body标签中增加元素

技术分享
                <div class="m"><img src="~/Content/images/addp.png" width="100%" onclick="uploadLogoImage(this)"/></div>                
                <input type="file" style="display: none" id="fileUpload" onchange="uploadImg(this)" />   
View Code

2、编写上传方法

技术分享
    function uploadLogoImage(img) {
        $(#fileUpload).click();
    }
    ///TODO:liandy 方法待修改
    //图片上传
    function uploadImg(obj) {   
        var _form = $("<form></form>");
        _form.append(obj);
        console.log(_form);
        _form.ajaxSubmit({
            url: "/File/UploadImage",
            //url:staticFileRoot + "/FileUpload.ashx",
            type: "post",
            enctype: "multipart/form-data",
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            dataType: "json",
            success: function (data) {
                if ("0" == data.error) {
                    $(#filePath).val(data.url);
                  
                    //删除.media的子元素
                    var media = $(".m").parent();
                    media.find("*").remove();
                    //增加.media的新的子元素
                    var closed = "<div class=‘closed‘><img src=‘/Content/images/closed.png‘ onclick=‘removeImg(this)‘ width=‘20‘ /></div>";
                    var m = "<div class=‘m‘><img src=‘"+data.url+"‘ width=‘100%‘ /></div>";
                    media.append(closed,m);
                } else {
                    jsprint(error.msg, "", "error");
                }
            }
        });
    }
View Code

 

图片上传

标签:

原文地址:http://www.cnblogs.com/liandy0906/p/5745114.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!