头像

jQuery+php实现ajax文件即时上传

来源:https://www.daimasucai.com/upload/47.html 代码素材管理员 2016-09-15浏览()

很多项目中需要用到即时上传功能,比如,选择本地图片后,立即上传并显示图像。本文结合实例讲解如何使用jQuery和PHP实现Ajax即时上传文件的功能,用户只需选择本地图片确定后即实现上传,并显示上传进度条,上传完成后,显示图片信息。

程序员,你不是一个人;网站开发QQ群:  在线充值,或联系QQ 3078847178直接充值

jQuery+php实现ajax文件即时上传
分类:首页>>PHP/Mysql>>上传 阅读次数:
查看演示 下载次数: 26

手机扫码访问:

下载资源 下载积分: 100

  HTML

  本示例基于jQuery以及相当出色的jquery.form插件,所以,先要载入jquery库和form插件。

  接着在页面中加入如下代码:

    <div class="btn"> 

         <span>添加附件</span> 

         <input id="fileupload" type="file" name="mypic"> 

    </div> 

    <div class="progress"> 

        <span class="bar"></span><span class="percent">0%</span > 

    </div> 

    <div class="files"></div> 

    <div id="showimg"></div> 

  我们在html中放置一个添加附件的按钮元素.btn,以及进度条.progress,用于显示文件信息的.files和显示图片的#showimg

  可以看出,我们用于上传文件的html中并没有出现form表单,而正常的上传功能是要依赖form表单的。我们的form表单是动态插入的,这样可以避免一个大表单中出现多个form。

  本文借助了jquery form插件来完成单文件上传功能,其实目前很很多款优秀的上传插件可以使用,有基于flash的,有基于jquery的,典型的有:jQuery File Upload。该插件支持多文件上传,支持拖拽上传等,有兴趣的同学可以先了解下。


声明:本文为原创文章,如需转载,请注明来源daimasucai.com并保留原文链接:https://www.daimasucai.com/upload/47.html
如果您觉得本文的内容对您的学习有所帮助,您可以扫描下面的二维码请我喝杯茶,感谢!
alipay转账 alipay转账 扫扫加qq群

评论(0)


温馨提示:为规范评论内容,垃圾评论一律封号...

后面还有条评论,点击查看>>