ajaxfileupload.js插件实现图片无刷新上传

本文介绍了一种使用jQuery和ajaxfileupload.js插件实现图片上传的方法。通过按钮点击触发上传功能,并利用Ajax进行异步上传,同时展示了如何在服务器端处理上传的图片并返回结果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.引用jQuery及ajaxfileupload.js

2.js

<script type="text/javascript">
$(function () {
    $(":button").click(function () {
        ajaxFileUpload();
    })
})
function ajaxFileUpload() {
    $.ajaxFileUpload
    (
        {
            url: '../ashx/upload.aspx', 
            secureuri: false, 
            fileElementId: 'file1',
            data: { "id": '123', "name": 'aaa' },
            dataType: 'json', 
            success: function (data, status)  
            {
                        
                $("#img1").attr("src", data.imgurl);

                if (typeof (data.error) != 'undefined') {
                    if (data.error != '') {
                        //alert(data.error);
                    } else {
                        //document.getElementById("ltlCon").innerHTML = data.imgurl;
                    }
                }
            },
            error: function (data, status, e)
            {
                //alert(e);
            }
        }
    )
    return false;
}
</script>

3.html

<input type="file" id="file1" onchange="ajaxFileUpload()" name="file" class="imgup" accept="image/*"/>

4.upload.aspx

        protected void Page_Load(object sender, EventArgs e)
        {
            string picName = "a";
            try
            {

                picName = Request.Form["name"].ToString();
            }
            catch (Exception)
            {
                picName = "b";
            }



            HttpFileCollection files = Request.Files;
            string msg = string.Empty;
            string error = string.Empty;
            string imgurl;
           

            if (files.Count > 0)
            {
                
                string uploadName = System.IO.Path.GetFileName(files[0].FileName);
                int idx = uploadName.LastIndexOf(".");
                string suffix = uploadName.Substring(idx);

                files[0].SaveAs(Server.MapPath("/updata/yubao/") + picName + ".jpg");
                msg = " 成功! 文件大小为:" + files[0].ContentLength;
                imgurl = "" + files[0].FileName;
                string res = "{ error:'" + error + "', msg:'" + picName + "',imgurl:'/updata/yubao/" + picName + ".jpg'}";
                Response.Write(res);
                Response.End();
            }
        }

 

转载于:https://www.cnblogs.com/xyangs/p/5390178.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值