js简单图片上传

需要引用<script src="../../plus/jquery.form/jquery.form.js"> </script>

html代码：

<form action="../../YuanJiaHousingResources/sellAdd.do" id="sub-from" enctype="multipart/form-data">

<input type="file" id="file" name="file" style="display: none" οnchange="getFullPath();"/>

<span class="btn btn-col" οnclick="upoadFile();">点击选择图片</span>

</form>

<div id="f_img"></div>

 

 

js代码：

//点击时弹出电脑文件并选择文件

function upoadFile() {
        $("#file").click();
    }

 

//将文件提交给后台并返回地址

function getFullPath() {

        //使用ajax提交form表单中的文件
        $('#sub-from').ajaxSubmit({
            url: '文件上传地址',
            type: 'post',
            success: function (data) {
                console.log(data)
                data = jQuery.parseJSON(data);
                if ("success" == data.result) {

                   //追加图片到f_img
                    var html="<img src=\""+data.message+"\"   class="pic_img" />";
                    $("#f_img").append(html);
                } else {
                    return false;
                }
            }
        });
    }

//如果传了多张图片就将所有地址拼接后存入数据库

       var picture= ''; //图片对象
        var pictureList= document.getElementsByClassName("pric_img");
        for (var i = 0; i < pictureList.length; i++) {
            if (null != pictureList[i].currentSrc) {
                picture+= pictureList[i].currentSrc + ","
            }
        }

       alert(picture);//获取class对象里面的所有图片地址