图片的上传前的预览

最新推荐文章于 2018-06-22 11:16:56 发布

原创

最新推荐文章于 2018-06-22 11:16:56 发布 · 4.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#function #image #server #textbox #callback #string

这段代码展示了如何使用jQuery实现图片上传前的预览功能，包括调整图片尺寸、兼容不同浏览器及图片类型的检查。同时，提供了清除上传控件值的方法以及在ASP.NET中前后台操作的示例。

不会在这里面上传文件所以就发源码了，在网上找到的。使用（jquery-1.4.2.min.js，uploadPreview.js，ImgFile.js）

uploadPreview.js
(function($) {
    jQuery.fn.extend({
        uploadPreview: function(opts) {
            opts = jQuery.extend({
                width: 0,
                height: 0,
                imgDiv: "#imgDiv",
                imgType: ["gif", "jpeg", "jpg", "bmp", "png"],
                maxwidth: 0,
                maxheight: 0,
                imgurl: null,
                callback: function() { return false; }
            }, opts || {});
            var _self = this;
            var _this = $(this);
            var imgDiv = $(opts.imgDiv);

imgDiv.width(opts.width);
imgDiv.height(opts.height);

            autoScaling = function() {
                if ($.browser.version == "7.0" || $.browser.version == "8.0") imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
                var img_width = imgDiv.width();
                var img_height = imgDiv.height();
                if (img_width > opts.maxwidth || img_height > opts.maxheight) {
                    alert("图片大小不符合要求");
                    clearvalue(_this[0]);
                    _this.trigger("blur"); //失去控件焦点

         &

最低0.47元/天解锁文章