Ajax实现异步上传图片

最新推荐文章于 2022-05-11 17:25:09 发布

industry2018

最新推荐文章于 2022-05-11 17:25:09 发布

阅读量175

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/industry2018/article/details/79509232

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<title>Ajax异步上传图片</title>  
<-- 引入jQuery异步上传js文件 -->  
<script src="/resource/jquery.form.js" type="text/javascript"></script>  
  
<!-- Ajax异步上传图片 -->  
<script type="text/javascript">  
    function uploadPic() {  
        // 上传设置  
        var options = {  
                // 规定把请求发送到那个URL  
                url: "/upload/uploadPic.do",  
                // 请求方式  
                type: "post",  
                // 服务器响应的数据类型  
                dataType: "json",  
                // 请求成功时执行的回调函数  
                success: function(data, status, xhr) {  
                    // 图片显示地址  
                    $("#allUrl").attr("src", data.path);  
                }  
        };  
          
        $("#jvForm").ajaxSubmit(options);  
    }  
</script>  
</head>  
<body>  
    <form id="jvForm" action="o_save.shtml" method="post" enctype="multipart/form-data">  
        <table>  
            <tbody>  
                <tr>  
                    <td width="20%">  
                        <span>*</span>  
                        上传图片(90x150尺寸):</td>  
                        <td width="80%">  
                        注:该尺寸图片必须为90x150。  
                    </td>  
                </tr>  
                <tr>  
                    <td width="20%"></td>  
                        <td width="80%">  
                        <img width="100" height="100" id="allUrl"/>  
                        <!-- 在选择图片的时候添加事件，触发Ajax异步上传 -->  
                        <input name="pic" type="file" οnchange="uploadPic()"/>  
                    </td>  
                </tr>  
            </tbody>  
        </table>  
    </form>  
</body>  
</html>

原文地址： http://blog.csdn.net/java__project/article/details/55062816