plupload 实现照片上传并且预览（思路分析加代码）

相信大家做Web开发的时候都会遇到文件的上传和预览问题，而我这次选择plupload这个插件的原因很简单，他不依赖于flash，他支持html5、flash、silverlight、html4。兼容性很好，用户体验好，不用下载一些插件就可以使用，这就是原因。好了，我们一起看实现过程吧。

一、实现思路

实现整个过程我们需要分为俩步：上传和预览。

1、上传：这一步比较好理解，就是在用户选择图片后，我们把图片上传到服务器上。相信这个大家观看官方API都可以实现。

2、预览：在我们完成上传之后我们还需要把上传之后的图片在服务器上的路径返回给前端页面，接着我们拿到这个路径以后修改img的src属性就可以完成预览啦。

二、源码实现

<script type="text/javascript">

    $(function () {

        var uploader = new plupload.Uploader({
            runtimes: 'html5,flash,silverlight,html4',
            browse_button: 'file_upload', //触发文件选择
            //container: document.getElementById('file_upload'),
            url: '../../../ComService/HandlerUploadify.ashx?action=UP',
            flash_swf_url: '../../Content/js/plupload-2.3.6/js/Moxie.swf',
            silverlight_xap_url: '../../Content/js/plupload-2.3.6/js/Moxie.xap',
            filters: {
                max_file_size: '40mb',
                mime_types: [
                    { title: "Image files", extensions: "jpg,gif,png" }
                ]
            },

            init: {
                FilesAdded: function (up, files) {
                    plupload.each(files, function (file) {
                        uploader.start();  //自动上传
                    });
                },
                FileUploaded: function (uploader, file, responseObject) {
                    var pic = decodeURIComponent(responseObject.response.substr(responseObject.response.lastIndexOf("%")));
                    var url = "..\\..\\Content\\img\\samplePic" + pic;
                    $("#pic_view").attr("src", url);
                    $("#F_pictureSysURL").val($("#pic_view").attr("src"));
                    $("#F_pictureSysURL").text($("#pic_view").attr("src"));
                }
            }
        });

        uploader.init();

    });

</script>

              <div style="text-align: center;">
                            <img id="pic_view" alt="图片预览" style="width: 220px;height: 120px;" />
                            <div id="uploadfileQueue" style="padding: 3px; width: 220px; display:none;">
                            </div>
                            <div id="file_uploadDiv" style="margin: 8px auto !important; width: 75px;">
                                <div id="file_upload" style="background: #f1bd23;padding: 5px;">
                                    上传
                                </div>
                            </div>
                        </div>

三、实现效果图

四、更多

这里有一个小的细节，就是当用户点击关闭按钮后，我们避免数据冗余，需要把该图片在服务器上删除。

还有要说的就是现在的H5已经可以访问本机资源了，也就是说当用户选择文件后可以直接实现预览不用上传至服务器了。

如果你需要本地预览的的实现版版本，

如果你需要uploadify的实现版本，

如果你需要webuploader的实现版本，

如果你需要.NET版本的后台代码，

如果你需要JAVA版本的后台代码，........

可以加入我们的基地，我们基地的地址是：450342630（QQ群号）

plupload 实现照片上传并且预览（思路分析加代码）

猜你喜欢