jquery图片上传,jquery 上传

jquery如何将页面生成的图片上传到服务器

File Upload组件啊，是同步还是异步呢

html部分：

input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*"

文件引入：

link rel="stylesheet" type="text/css" href="diyUpload/css/diyUpload.css"script type="text/javascript" src="diyUpload/js/diyUpload.js"/script

HTML部分：

div id="demo" div id="as" /div/div

JS部分：

script type="text/javascript"

/** 服务器地址,成功返回,失败返回参数格式依照jquery.ajax习惯;* 其他参数同WebUploader*/

$('#as').diyUpload({

url:'server/fileupload.php',

success:function( data ) {

console.info( data ); },

error:function( err ) {

console.info( err );

},

buttonText : '选择文件', chunked:true, // 分片大小

chunkSize:512 * 1024, //最大上传的文件数量, 总文件大小,单个文件大小(单位字节);

fileNumLimit:50,

fileSizeLimit:500000 * 1024,

fileSingleSizeLimit:50000 * 1024,

accept: {}});

/script

相关问答

Q1: jquery多图片上传(form表单序列化提交)为啥后台只获取一个图片文件

直接用$_post['data'];获取即可的；

$data = $_post['data'];

echo '

';

print_r($data);

die();这样就是一个数组，你无需再用什么序列化、反序列化之类的，你可以输出$_post的数据看看就知道勒！(*^__^*)

若有任何其它疑问，欢迎追问......

评论

加载更多

Q2: 我需要一个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源码。

Q3: Jquery上传图片提交到一般处理程序中返回图片路径

data:null

传递给服务器的数据为空，当然没有接收到文件数据。

上传文件时一般使用ajaxFileUpload方法。

Q4: jquery怎样限制上传图片的大小和像素宽高，分辨率

script type="text/javascript" 

function validate_img(a){

 var file = a.value;

 if(!/.(gif|jpg|jpeg|png|GIF|JPG|png)$/.test(file)){

  alert("图片类型必须是.gif,jpeg,jpg,png中的一种");

  return false;

}else{

     var image = new Image();

     image.src = file;

     var height = image.height;

     var width = image.width;

     var filesize = image.filesize;

  alert(height+"x.."+filesize);

     if(width80  height80  filesize102400){

      alert('请上传80*80像素 或者大小小于100k的图片');

  return false;

     }

 }

 alert("图片通过");

}

/script 

图像:input type="file" name="uploadImg" onchange="Javascript:validate_img(this);" size="12"/

测试的时候放服务器上测试，本地不行的哈～

Q5: 用js、jquery如何实现上传图片的预览

$("#btnLoadPhoto").upload({ url: "../UploadForms/RequestUpload.aspx?action=photo", type: "json", callback: calla });

//获得表单元素

 HttpPostedFile oFile = context.Request.Files[0];

 //设置上传路径

 string strUploadPath = "temp/";

 //获取文件名称

 string fileName = context.Request.Files[0].FileName;

补充：JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。