douzepao0281 2015-10-24 01:46
浏览 18
已采纳

jQuery中的文件上传问题

here is an upload button, from which user can choose the file

Basically what I want to do is whenever user chooses an image from that, it should display it at the place where that "trees" image is.

I'm stuck, really need some help.

here is the code

<div class="user-editable-div">   
        <div class="image-div" id="image_div"><img src="images/image.jpg" id="bg_image" /></div>
        <span class="upload-btn">UPLOAD IMAGE</span>
        <input type="file" id="uploader" />
        <div class="content-div">
            <h1 contenteditable="true">USER EDITABLE</h1>
            <p contenteditable="true">All elements on this page are user editable. You can edit them by simply clicking or by clicking on the edit button next to the element.</p>
    </div>
</div>

when the user chooses a file from "#uploader" it should display the image in "#bg_image"

</div>
  • 写回答

2条回答 默认 最新

  • douzhouqin6223 2015-10-24 05:11
    关注

    With this code when you try to upload image with use file controller at that time that image preview in bg_image element

       <div class="user-editable-div">  
            <div class="image-div" id="image_div"><img src="images/image.jpg" id="bg_image" /></div>
            <span class="upload-btn">UPLOAD IMAGE</span>
            <input type="file" id="uploader" onchange="readURL(this,this.id);"/>
            <div class="content-div">
                <h1 contenteditable="true">USER EDITABLE</h1>
                <p contenteditable="true">
                  All elements on this page are user editable. You can edit them by simply clicking or by clicking on the edit button next to the element.
                </p>
            </div>
        </div>
    
       <script>
    function readURL(input,ids)
    {
        if (input.files && input.files[0])
            {
                var reader = new FileReader();
                reader.onload = function (e)
                {
                    $('#bg_image').attr('src', e.target.result).width(650).height(375);
                };
                reader.readAsDataURL(input.files[0]);
            }
    }       
    </script>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥50 内网的网页打开的Excel下载到本地
  • ¥15 该网站用的是什么程序模版
  • ¥15 verilog modelsim仿真
  • ¥15 Power BI 里面 帕累托图突出显示前20
  • ¥50 用预估矫正法,分数阶微分方程组传染病的最优控制代码怎么写
  • ¥15 画个数据流程图,手画也行
  • ¥60 AS自带模拟器AVD Root 和 Xposed安装
  • ¥30 哪位搞Android的编程师可以帮我远程一下,悬赏30元
  • ¥15 solidity部署上合约,可以mint,也继承接口了,在区块链也不显示代币名字
  • ¥15 讨论 博士论文交互项怎么讨论?