使用javascript进行多图像上传预览

时间:2017-12-05 16:06:22

标签: javascript ruby-on-rails

我在javascript内使用以下rails 5 app,以便在提交表单之前预览图片。

图像表单字段具有多个文件的设置,但javascript只有一个设置。我可以预览多个图像,但最终只能上传一个。

如何进行此javascript预览并上传多张图片?

<script>
    function handleFileSelect(event)
    {
        console.log(event)
        var input = this;
        if (input.files && input.files[0])
        {
            var reader = new FileReader();
            console.log(reader)
            reader.onload = (function (e)
            {
                var span = document.createElement('span');
                span.innerHTML = ['<img class="thumb" src="',e.target.result, '" title="', escape(e.name), '"/><span class="remove_img_preview"></span>'].join('');
                document.getElementById('preview').insertBefore(span, null);
            });
            reader.readAsDataURL(input.files[0]);
        }
    }
    //su kien thay doi hinh khac
     $('#files').change(handleFileSelect);
     //day la su kien click vao nut x để xóa ảnh
     $('#preview').on('click', '.remove_img_preview',function ()
    {
        $(this).parent('span').remove();
        $(this).val("");
    });
</script>

0 个答案:

没有答案