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();
                }
            });
        }