html5 ajax 跨域上传图片

来源:互联网 发布:excel表格数据对比 编辑:程序博客网 时间:2024/06/06 07:04

html:

            <div class="w-img choseimg">
                <input type="file">
                <img src="" id="imageId">
            </div>

js:

// 读取地址        function readURL(input, tmpimg) {            if (input.files && input.files[0]) {                var reader = new FileReader();                reader.onload = function (e) {                    if (!/image/.test(e.target.result)) {                        alert('请上传图片格式...');                        return false;                        alert(22);                    }                    tmpimg.attr('src', e.target.result);                }                reader.readAsDataURL(input.files[0]);            }        }        var stringImg = "";        $(function () {            // var tmpimgurl = $(".choseimg img").attr('src');            // 头像            $(".choseimg input").change(function () {                var $me = $(this);                var $img = $me.parent().find('img');                readURL(this, $img);                var file = this.files[0];                var formData = new FormData();                formData.append('img1', file);               $.ajax({                    type: "POST", //必须用post                    url: "http://<%=maindomain %>/MicroMartApi/MemberHandler.ashx?action=upload&username=" + username.username,                    crossDomain: true,                    jsonp: "jsoncallback",                    data: formData,                    contentType: false, //必须                    processData: false,                    //不能用success,否则不执行                    complete: function (data) {                        var data = eval(data.responseText);                        console.log(data.Data);                    }                });            });        });


后台:

 /// <summary>        /// 支持跨域请求        /// </summary>        /// <param name="context"></param>        public static void Origin()        {            string callBackName = HttpContext.Current.Request.Params["jsoncallback"] == null ? "" : HttpContext.Current.Request.Params["jsoncallback"].ToString();            if (string.IsNullOrEmpty(callBackName))     //此参数如果为空,则表示客户端使用的不是jsonp方式的ajax请求            {                HttpContext.Current.Response.ClearHeaders();                string origin = HttpContext.Current.Request.Headers["Origin"];                HttpContext.Current.Response.AppendHeader("Access-Control-Allow-Origin", string.IsNullOrEmpty(origin) ? "*" : origin);                string requestHeaders = HttpContext.Current.Request.Headers["Access-Control-Request-Headers"];                HttpContext.Current.Response.AppendHeader("Access-Control-Allow-Headers", string.IsNullOrEmpty(requestHeaders) ? "*" : requestHeaders);                HttpContext.Current.Response.AppendHeader("Access-Control-Allow-Methods", "POST, OPTIONS");            }        }        /// <summary>        /// ajax请求返回数据        /// </summary>        /// <param name="jsonData"></param>        public static void AjaxWrite(string jsonData)        {            HttpContext.Current.Response.ContentType = "application/json;charset=utf-8";            string callBackName = string.Empty;            callBackName = HttpContext.Current.Request.Params["jsoncallback"] == null ? "" : HttpContext.Current.Request.Params["jsoncallback"].ToString();            if (!string.IsNullOrEmpty(callBackName))         //此参数如果为空,则表示客户端使用的不是jsonp方式的ajax请求            {                HttpContext.Current.Response.Write(callBackName + "("+jsonData+")");            }            else            {                HttpContext.Current.Response.Write(jsonData);            }        }protected void Page_Load(object sender, EventArgs e)        {            Response.Clear();            WebFormHandler.Origin();            string Action=Request["Action"];            switch (Action) {                case "QueryRelation":                    QueryRelation();                    break;                case "QueryManageRelation":                    QueryManageMember();                    break;                case "RetailAwardTrace":                    RetailAwardTrace();                    break;                case "RetailAwardQuery":                    RetailAwardQuery();                    break;                case "StockAwardTrace":                    StockAwardTrace();                    break;                case "StockAwardQuery":                    StockAwardQuery();                    break;            }            WebFormHandler.AjaxWrite("(" + json + ")");            Response.End();        }



0 0
原创粉丝点击