js上传选择图片功能代码（js上传图片并预览）

本文目录一览：

• 1、我需要一个js或者jquery能批量上传图片+预览的功能。急~~~急~~~急~~
• 2、怎样用js或者jq实现点击这个图片就可以选择上传还有预览图片啊
• 3、求一段JS或Jquery异步上传图片的代码
• 4、用js脚本,怎么实现弹出选择图片的对话框，并将文件上传到服务器

我需要一个js或者jquery能批量上传图片+预览的功能。急~~~急~~~急~~

Web Uploader 项目，符合你的要求。

1、引入资源

使用Web Uploader文件上传需要引入三种资源：JS, CSS, SWF。

!–引入CSS–

link rel=”stylesheet” type=”text/css” href=”webuploader文件夹/webuploader.css”

!–引入JS–

script type=”text/javascript” src=”webuploader文件夹/webuploader.js”/script

!–SWF在初始化的时候指定，在后面将展示–

2、Html

首先需要准备一个按钮，和一个用来存放添加的文件信息列表的容器。

!–dom结构部分–

div id=”uploader-demo”

    !–用来存放item–

    div id=”fileList” class=”uploader-list”/div

    div id=”filePicker”选择图片/div

/div

3、Javascript

创建Web Uploader实例

// 初始化Web Uploader

var uploader = WebUploader.create({

    // 选完文件后，是否自动上传。

    auto: true,

    // swf文件路径

    swf: BASE_URL + ‘/js/Uploader.swf’,

    // 文件接收服务端。

    server: ”,

    // 选择文件的按钮。可选。

    // 内部根据当前运行是创建，可能是input元素，也可能是flash.

    pick: ‘#filePicker’,

    // 只允许选择图片文件。

    accept: {

        title: ‘Images’,

        extensions: ‘gif,jpg,jpeg,bmp,png’,

        mimeTypes: ‘image/*’

    }

});

监听fileQueued事件，通过uploader.makeThumb来创建图片预览图。

PS: 这里得到的是Data URL数据，IE6、IE7不支持直接预览。可以借助FLASH或者服务端来完成预览。

// 当有文件添加进来的时候

uploader.on( ‘fileQueued’, function( file ) {

    var $li = $(

            ‘div id=”‘ + file.id + ‘” class=”file-item thumbnail”‘ +

                ‘img’ +

                ‘div class=”info”‘ + file.name + ‘/div’ +

            ‘/div’

            ),

        $img = $li.find(‘img’);

    // $list为容器jQuery实例

    $list.append( $li );

    // 创建缩略图

    // 如果为非图片文件，可以不用调用此方法。

    // thumbnailWidth x thumbnailHeight 为 100 x 100

    uploader.makeThumb( file, function( error, src ) {

        if ( error ) {

            $img.replaceWith(‘span不能预览/span’);

            return;

        }

        $img.attr( ‘src’, src );

    }, thumbnailWidth, thumbnailHeight );

});

然后剩下的就是上传状态提示了，当文件上传过程中, 上传成功，上传失败，上传完成都分别对应uploadProgress, uploadSuccess, uploadError, uploadComplete事件。

// 文件上传过程中创建进度条实时显示。

uploader.on( ‘uploadProgress’, function( file, percentage ) {

    var $li = $( ‘#’+file.id ),

        $percent = $li.find(‘.progress span’);

    // 避免重复创建

    if ( !$percent.length ) {

        $percent = $(‘p class=”progress”span/span/p’)

                .appendTo( $li )

                .find(‘span’);

    }

    $percent.css( ‘width’, percentage * 100 + ‘%’ );

});

// 文件上传成功，给item添加成功class, 用样式标记上传成功。

uploader.on( ‘uploadSuccess’, function( file ) {

    $( ‘#’+file.id ).addClass(‘upload-state-done’);

});

// 文件上传失败，显示上传出错。

uploader.on( ‘uploadError’, function( file ) {

    var $li = $( ‘#’+file.id ),

        $error = $li.find(‘div.error’);

    // 避免重复创建

    if ( !$error.length ) {

        $error = $(‘div class=”error”/div’).appendTo( $li );

    }

    $error.text(‘上传失败’);

});

// 完成上传完了，成功或者失败，先删除进度条。

uploader.on( ‘uploadComplete’, function( file ) {

    $( ‘#’+file.id ).find(‘.progress’).remove();

});

更多细节，请查看js源码。

怎样用js或者jq实现点击这个图片就可以选择上传还有预览图片啊

!doctype html

html

head

meta charset=”UTF-8″

meta name=”Generator” content=”EditPlus®”

meta name=”Author” content=””

meta name=”Keywords” content=””

meta name=”Description” content=””

titleDocument/title

script src=”jquery-3.1.1.min.js”/script

/head

body

h3请选择图片文件：JPG/GIF/h3

form name=”form0″ id=”form0″

input type=”file” name=”file0″ id=”file0″ multiple=”multiple” /

brbrimg src=”” id=”img0″ width=”120″

/form

/body

script

$(“#file0”).change(function(){

var objUrl = getObjectURL(this.files[0]) ;

console.log(“objUrl = “+objUrl) ;

if (objUrl)

{

$(“#img0”).attr(“src”, objUrl);

$(“#img0”).removeClass(“hide”);

}

}) ;

//建立一个可存取到该file的url

function getObjectURL(file)

{

var url = null ;

if (window.createObjectURL!=undefined)

{ // basic

url = window.createObjectURL(file) ;

}

else if (window.URL!=undefined)

{

// mozilla(firefox)

url = window.URL.createObjectURL(file) ;

}

else if (window.webkitURL!=undefined) {

// webkit or chrome

url = window.webkitURL.createObjectURL(file) ;

}

return url ;

}

$(‘input’).on(‘change’,function(){

var value = $(this).val();

value = value.split(“\\”)[2];

alert(value);

})

/script

/html

求一段JS或Jquery异步上传图片的代码

图片和文件等流媒体 上传都是靠from表单的提交。

你可以设置一个隐藏的from表单

里面有个input id=’file’ type=’file’

选择玩图片之后赋值给file

然后用jquery from表单提交即可

form id=”form” runat=”server” enctype=”multipart/form-data” 

input id=’file’ type=’file’

/from

$.ajax({

    url:’XXXX’,//上传后台路径

    data:$(‘#form’).serialize(),

    type:”POST”,

    success:function(){

    }

});

用js脚本,怎么实现弹出选择图片的对话框，并将文件上传到服务器

//要有form标签，设置提交地址。后面就是后台的事了。

form action=”提交地址” method=”post” enctype=”multipart/form-data”

input type=”button” id=”upload” name=”” value=”选择” /

input type=”submit” id=”upload” name=”” value=”提交” /

/form

//百度没给我审核通过：“先介绍算法思路，再给出参考代码，并对关键代码做注释说明。提供运行效果截图。”

//这句话是给百度的：“我真实忍不住要骂人，思路，参考代码，注释，还要运行效果截图！！这一串下来要花多少时间？？你TM是给我发工资还是怎么！！！？？我给别人解决问题浪费我少许时间我可接收我也算助人为乐，现在到好还要像孙子一样按你的指示一步步做事？？？？”