图像预览功能不起作用?

时间:2015-08-10 03:27:07

标签: javascript php html

我有一个Javascript,用于预览需要上传的图片。但问题是它只适用于第一个选择的图像,而不适用于需要上传的其他图像。以下是图片上传和预览的代码。

<form id='uploadForm-<?php echo $imgCnt; ?>' action = '' enctype='multipart/form-data' method = 'POST' class="form<?php echo $imgCnt; ?>">
        <input type="file"  class="image<?php echo $imgCnt; ?>" name="img" onChange="readURL(this);" /><br/>
<input type="file"  class="image<?php echo $imgCnt; ?>" name="img" onChange="readURL(this);" /><br/>
<input type="file"  class="image<?php echo $imgCnt; ?>" name="img" onChange="readURL(this);" /><br/>
<input type="file"  class="image<?php echo $imgCnt; ?>" name="img" onChange="readURL(this);" /><br/>
<input type="file"  class="image<?php echo $imgCnt; ?>" name="img" onChange="readURL(this);" /><br/>
        <img id="blah" src="#" alt="your image" /><br/><br/>
        <input type='button' id = '<?php echo $imgCnt; ?>' class='uploadPicture<?php echo $imgCnt; ?> btn btn-primary' value = '上載'>
        <!-- <input type="button" value="上載" class="uploadPicture"  id="upload_btn<?php echo $imgCnt; ?>"/> -->
    </form>

以下是 readURL 函数的Javascript,名为 onChange

<script>

function readURL(input) {      
        if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            //$('#blah').attr('src', e.target.result).width(300).height(340);
             $(input).next('img').attr('src', e.target.result).width(300).height(340);
        };
        reader.readAsDataURL(input.files[0]);
    }

  }
</script>

任何线索如何实现此功能。

0 个答案:

没有答案