html5 ajax 跨域上传图片

时间:2022-08-29 09:46:50

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();
}