Home  >  Article  >  Backend Development  >  PHP+ajaxfileupload+jcrop plug-in perfectly realizes avatar upload and cropping_PHP tutorial

PHP+ajaxfileupload+jcrop plug-in perfectly realizes avatar upload and cropping_PHP tutorial

WBOY
WBOYOriginal
2016-07-13 10:28:481256browse


I spent some time yesterday integrating the avatar plug-in. I pieced together the results. Let’s take a look at the effect first

PHP+ajaxfileupload+jcrop plug-in perfectly realizes avatar upload and cropping_PHP tutorial

1. First use the ajaxfileupload plug-in to do asynchronous upload. I originally wanted to create an upload progress effect here, but the technology was limited and failed. I also set a file size limit for the upload button, but due to browser compatibility issues, it is not perfect and there are still many problems that need to be solved between IE6--IE9

The getFileSize function is a function used to determine the file size

Copy code The code is as follows:

function getFileSize(fileName) {
                                                                                       / /console.log($("#" + fileName).val());
     if($("#" + fileName)[0].files) {
    var byteSize = $("#" + fileName)[0].files[0].size;
                                                                                                                                   (byteSize);
byteSize = Math.ceil(byteSize / 1024) //KB
return byteSize;//KB
}



2. Button upload event binding

Copy code

The code is as follows:

$("#btnUpload").click(function () {
            var allowImgageType = ['jpg', 'jpeg', 'png', 'gif'];
              var file = $("#file1").val();
                                                                                                                                     if (file.length > 0 ) {
if(byteSize > 2048) {
alert("The uploaded attachment file cannot exceed 2M");
return;
                     }
                                                                                                                                                                                                               ");
                                                                                            ; > if( $.inArray(ext, allowImgageType) != -1) {
                                                                                                            Select jpg, jpeg, png, gif type pictures");
                                                                                                                                                                                                                                                  ;                                                                                                                    >
3. After the upload is successful, return the image path and initialize image cropping. For image cropping, use ajax to request directly to php




Copy code

The code is as follows:

function ajaxFileUpload() {
                $.ajaxFileUpload({
                    url: 'action.php', //用于文件上传的服务器端请求地址
                    secureuri: false, //一般设置为false
                    fileElementId: 'file1', //文件上传空间的id属性 
                    dataType: 'json', //返回值类型 一般设置为json
                    success: function (data, status)  //服务器成功响应处理函数
                    {
                        //var json = eval('(' + data + ')');
                        //alert(data);
                        $("#picture_original>img").attr({src: data.src, width: data.width, height: data.height});
                        $('#imgsrc').val(data.path);
                        //alert(data.msg);

                                                                                                                                                                 //Container ID of the main picture
,
                                                                                                                                                                                                                  // Thumbnail configuration, ID: container ID; width, height: thumbnail size
                                                         ,height:200},{id:"picture_50 ",width:50,height:50},{id:"picture_30",width:30,height:30}],
                                                                                      : {width:200,height:200 },
                                                                                                                                                                                          .val(c.x);
                                                                                                                                                                                                                                     through                                                               >                                                                                                                                                                                                                                                                                                                         ();
                                                                              alert(e);
                                                                 )
                return false;
            }

            $('#btnCrop').click(function() {
                $.getJSON('action2.php', {x: $('#x1').val(), y: $('#y1').val(), w: $('#cw').val(), h: $('#ch').val(), src: $('#imgsrc').val()}, function(data) {
                    alert(data.msg);
                });
                return false;
            });

4.HTML文件代码如下

复制代码 代码如下:


   


   
   

现在还很粗糙,功能还有很多需要完善的地方。大家有兴趣的话,就拿去使用吧。如果完善了进度条和文件大小的功能,记得也分享给我一份哦。

附上源码 http://www.jb51.net/codes/174384.html

www.bkjia.comtruehttp://www.bkjia.com/PHPjc/781038.htmlTechArticle昨天花了点时间整合了一下头像插件 东拼西凑的成果 先来看下效果 1.先使用ajaxfileupload插件做异步上传。这个地方我本来想做个上传进度的...
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn