javascript中上传图片的实现方法

最新推荐文章于 2024-07-18 20:54:54 发布

yz06061079

最新推荐文章于 2024-07-18 20:54:54 发布

阅读量1.4k

点赞数

分类专栏： javascript html5 文章标签：上传图片 html javascript 七牛 input typefile

本文链接：https://blog.csdn.net/yangzhen06061079/article/details/52964640

版权

本文介绍了三种前端上传图片的方法：1) 使用原生`<input type="file">`标签，简单但UI简陋；2) 结合安卓或iOS的`connectWebViewJavascriptBridge`方法，适用于APP场景；3) 通过七牛云服务，提供美观UI并加速图片加载。在实际开发中，第三种方法更为推荐。

摘要由CSDN通过智能技术生成

上传图片是web前端开发中很常见的一个功能，下面介绍web前端上传图片的几种方法。

方法一：原生input type=file方法

html5提供了<input type="file">的标签，可以上传图片，demo可以参考w3shool:demo。

对于这个原生的标签，优化是简洁明了，一看即懂，缺点是UI很简陋，图片和其它表单内容一起直接上传服务端，正式开发中很少使用。

方法二：借助安卓或IOS的connectWebViewJavascriptBridge方法上传

如果web页面的使用场景是APP，而且IOS和安卓已经有现成的connectWebViewJavascriptBridge方法可供使用，那么可以使用connectWebViewJavascriptBridge这个方法上传图片。

html代码：

<dl class="upload clearfix">
                    <dt>上传照片:</dt>
                    <dd class="upload_area clearfix">
                        <div id="preview" class="upload_preview">
                            <div class="add_upload">
                                <div class="uploadBtnImg">
                                    <img class="uploadBtn_image" src="/wishDriftBottle/imgs/sourceImgs/add_img.png">
                                </div>
                            &l