js带预览功能上传图片

一般上传文件使用的是type="file"类型，
看到的效果大概就是这样的
如果要实现预览上传的图片功能，先要在div中开辟一个存放预览图片的地方，如下面的preview空间，

                <form id="save" enctype="multipart/form-data"  >
                    <div class="item">
                        <span src="../img/tc_bitian.png" class="left">图片：</span>
                        <div class="pull-left">
                            <div class="">
                                <div class="">
                                    <img id="preview" width="250px" height="200px" src="">
                                </div>
                                <input id="file_upload" type="file" name="imgFile" accept="image/png,image/gif,image/jpg"/>
                            </div>
                        </div>
                    </div>
                </form>

js实现预览功能代码

            $("#file_upload").change(function () {
                var $file = $(this);
                var fileObj = $file[0];
                var windowURL = window.URL || window.webkitURL;
                var dataURL;
                var $img = $("#preview");
                if (fileObj && fileObj.files && fileObj.files[0]) {
                    dataURL = windowURL.createObjectURL(fileObj.files[0]);
                    $img.attr('src', dataURL);
                } else {
                    dataURL = $file.val();
                    var imgObj = document.getElementById("preview");
                    imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
                }
            });

最终看到的效果如下

通过异步方式提交到后台，后台再通过流的方式读取，以进行下一步操作

        function coupon_save() {
            var formData = new FormData($("#save" )[0]);
            $.ajax({
                type : 'post',
                url : 'save.do',
                data:formData,
                contentType:false,
                processData: false,
                success : function(data){
                	location.reload();
                }
            });
        }