Jquery上传多个图像和预览

时间:2014-03-10 21:51:01

标签: javascript php jquery

我如何能够为此脚本添加添加多个图像的功能,如下所示。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

<h1>jQuery Uploads</h1>

    <form id="form1" runat="server">
        <input type="file" id="imgInp" />
        <img id="target" src="#" alt="your image" />
        <input type="file" id="imgLarge1" />
        <img id="large1" src="#" alt="your image 1" />
        <input type="file" id="imgLarge2" />
        <img id="large2" src="#" alt="your image 2" />
    </form>
<script>
 function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();            
            reader.onload = function (e) {
                $('#target').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#imgInp").change(function(){
        readURL(this);
    });
</script>
</body>
</html>

我不知道在哪里修改jquery以允许多个图像。非常感谢任何帮助。

2 个答案:

答案 0 :(得分:0)

稍微改变你的表格:

<form id="form1" runat="server">
        <input type="file" class="file" id="1"/>
        <img id="img1" src="#" alt="your image" />
        <input type="file" class="file" id="2"/>
        <img id="img2" src="#" alt="your image 1" />
        <input type="file" class="file" id="3"/>
        <img id="img3" src="#" alt="your image 2" />
</form>

并将javascript更改为

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();            
            reader.onload = function (e) {
                $('#img'+e.id).attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $(".file").change(function(){
        readURL(this);
    });

答案 1 :(得分:0)

<h1>jQuery Uploads</h1>

    <form id="form1" runat="server">
        <input type="file" id="imgInp"/>
        <img id="target_imgInp" src="#" alt="your image" class="thumb"/>
        <input type="file" id="large1" />
        <img id="target_large1" src="#" alt="your image 1" />
        <input type="file" id="large2" />
        <img id="target_large2" src="#" alt="your image 2" />
    </form>
<script>
 function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();            
            reader.onload = function (e) {

               $("#target_"+$(input).attr("id")).attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("input[type=file]").change(function(){
        readURL(this);
    });
</script>