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

本文链接：https://blog.youkuaiyun.com/qq_27532167/article/details/86612954

相信大家做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>

三、实现效果图