1. Набираем команду codeby webinar. Набираем команду для организации и проведения вебинаров. Подробнее ...

    Скрыть объявление
  2. Требуются разработчики и тестеры для проекта codebyOS. Требования для участия в проекте: Знание принципов работы ОС на базе Linux; Знание Bash; Крайне желательное знание CPP, Python, Lua; Навыки системного администрирования. Подробнее ...

    Скрыть объявление
  3. Получи 30.000 рублей. Для получения денег необходимо принять участие в конкурсе авторов codeby. С условиями и призами можно ознакомиться на этой странице ...

    Внимание! Регистрация авторов на конкурс закрыта.

    Скрыть объявление

Передача Информации О Загруженном Файле В Текстовое Поле.

Тема в разделе "Web - программирование", создана пользователем Gefo, 14 июн 2012.

Статус темы:
Закрыта.
  1. Gefo

    Gefo Гость

    Репутация:
    0
    Добрый вечер.
    Сделал загрузку файлов на сервер,после загрузки файла информация о загруженном файле прописывается ниже формы (iframe).
    Не знаю каким образом можно было сделать так чтоб информация передовалаяь в текстовое поле.
    Надеюсь на вашу помощь.
    HTML
    Содержимое файла jquery.ajax.upload.js
    PHP:
    (function(){
    var 
    documentwindow;

    /**
    * Get element by id
    */    
    function get(element){
    if (
    typeof element == "string")
    element d.getElementById(element);
    return 
    element;
    }

    /**
    * Attaches event to a dom element
    */
    function addEvent(eltypefn){
    if (
    w.addEventListener){
    el.addEventListener(typefnfalse);
    } else if (
    w.attachEvent){
    var 
    = function(){
    fn.call(elw.event);
    };            
    el.attachEvent('on' typef)
    }
    }


    /**
    * Creates and returns element from html chunk
    */
    var toElement = function(){
    var 
    div d.createElement('div');
    return function(
    html){
    div.innerHTML html;
    var 
    el div.childNodes[0];
    div.removeChild(el);
    return 
    el;
    }
    }();

    function 
    hasClass(ele,cls){
    return 
    ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
    }
    function 
    addClass(ele,cls) {
    if (!
    hasClass(ele,cls)) ele.className += " "+cls;
    }
    function 
    removeClass(ele,cls) {
    var 
    reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
    ele.className=ele.className.replace(reg,' ');
    }

    // getOffset function copied from jQuery lib (http://jquery.com/)
    if (document.documentElement["getBoundingClientRect"]){
    // Get Offset using getBoundingClientRect
    // http://ejohn.org/blog/getboundingclientrect-is-awesome/
    var getOffset = function(el){
    var 
    box el.getBoundingClientRect(),
    doc el.ownerDocument,
    body doc.body,
    docElem doc.documentElement,

    // for ie 
    clientTop docElem.clientTop || body.clientTop || 0,
    clientLeft docElem.clientLeft || body.clientLeft || 0,

    // In Internet Explorer 7 getBoundingClientRect property is treated as physical,
    // while others are logical. Make all logical, like in IE8.


    zoom 1;
    if (
    body.getBoundingClientRect) {
    var 
    bound body.getBoundingClientRect();
    zoom = (bound.right bound.left)/body.clientWidth;
    }
    if (
    zoom 1){
    clientTop 0;
    clientLeft 0;
    }
    var 
    top box.top/zoom + (window.pageYOffset || docElem && docElem.scrollTop/zoom || body.scrollTop/zoom) - clientTop,
    left box.left/zoom + (window.pageXOffset|| docElem && docElem.scrollLeft/zoom || body.scrollLeft/zoom) - clientLeft;

    return {
    toptop,
    leftleft
    };
    }

    } else {
    // Get offset adding all offsets 
    var getOffset = function(el){
    if (
    w.jQuery){
    return 
    jQuery(el).offset();
    }        

    var 
    top 0left 0;
    do {
    top += el.offsetTop || 0;
    left += el.offsetLeft || 0;
    }
    while (
    el el.offsetParent);

    return {
    leftleft,
    toptop
    };
    }
    }

    function 
    getBox(el){
    var 
    leftrighttopbottom;    
    var 
    offset getOffset(el);
    left offset.left;
    top offset.top;

    right left el.offsetWidth;
    bottom top el.offsetHeight;        

    return {
    leftleft,
    rightright,
    toptop,
    bottombottom
    };
    }

    /**
    * Crossbrowser mouse coordinates
    */
    function getMouseCoords(e){        
    // pageX/Y is not supported in IE
    // http://www.quirksmode.org/dom/w3c_cssom.html            
    if (!e.pageX && e.clientX){
    // In Internet Explorer 7 some properties (mouse coordinates) are treated as physical,
    // while others are logical (offset).
    var zoom 1;    
    var 
    body document.body;

    if (
    body.getBoundingClientRect) {
    var 
    bound body.getBoundingClientRect();
    zoom = (bound.right bound.left)/body.clientWidth;
    }

    return {
    xe.clientX zoom d.body.scrollLeft d.documentElement.scrollLeft,
    ye.clientY zoom d.body.scrollTop d.documentElement.scrollTop
    };
    }

    return {
    xe.pageX,
    ye.pageY
    };        

    }
    /**
    * Function generates unique id
    */        
    var getUID = function(){
    var 
    id 0;
    return function(){
    return 
    'ValumsAjaxUpload' id++;
    }
    }();

    function 
    fileFromPath(file){
    return 
    file.replace(/.*(\/|\\)/, "");            
    }

    function 
    getExt(file){
    return (/[.]/.
    exec(file)) ? /[^.]+$/.exec(file.toLowerCase()) : '';
    }            

    // Please use AjaxUpload , Ajax_upload will be removed in the next version
    Ajax_upload AjaxUpload = function(buttonoptions){
    if (
    button.jquery){
    // jquery object was passed
    button button[0];
    } else if (
    typeof button == "string" && /^#.*/.test(button)){                    
    button button.slice(1);                
    }
    button get(button);    

    this._input null;
    this._button button;
    this._disabled false;
    this._submitting false;
    // Variable changes to true if the button was clicked
    // 3 seconds ago (requred to fix Safari on Mac error)
    this._justClicked false;
    this._parentDialog d.body;

    if (
    window.jQuery && jQuery.ui && jQuery.ui.dialog){
    var 
    parentDialog jQuery(self._button).parents('.ui-dialog-content');
    if (
    parentDialog.length){
    this._parentDialog parentDialog[0];
    }
    }

    this._settings = {
    // Location of the server-side upload script
    action'upload.php',            
    // File upload name
    name'userfile',
    // Additional data to send
    data: {},
    // Submit file as soon as it's selected
    autoSubmittrue,
    // The type of data that you're expecting back from the server.
    // Html and xml are detected automatically.
    // Only useful when you are using json data as a response.
    // Set to "json" in that case. 
    responseTypefalse,
    // When user selects a file, useful with autoSubmit disabled            
    onChange: function(fileextension){},                    
    // Callback to fire before file is uploaded
    // You can return false to cancel upload
    onSubmit: function(fileextension){},
    // Fired when file upload is completed
    // WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE!
    onComplete: function(fileresponse) {}
    };

    // Merge the users options with our defaults
    for (var i in options) {
    this._settings[i] = options[i];
    }

    this._createInput();
    this._rerouteClicks();
    }

    // assigning methods to our class
    AjaxUpload.prototype = {
    setData : function(data){
    this._settings.data data;
    },
    disable : function(){
    this._disabled true;
    },
    enable : function(){
    this._disabled false;
    },
    // removes ajaxupload
    destroy : function(){
    if(
    this._input){
    if(
    this._input.parentNode){
    this._input.parentNode.removeChild(this._input);
    }
    this._input null;
    }
    },                
    /**
    * Creates invisible file input above the button 
    */
    _createInput : function(){
    var 
    self this;
    var 
    input d.createElement("input");
    input.setAttribute('type''file');
    input.setAttribute('name'this._settings.name);
    var 
    styles = {
    'position' 'absolute'
    ,'margin''-5px 0 0 -175px'
    ,'padding'0
    ,'width''220px'
    ,'height''30px'
    ,'fontSize''14px'                                
    ,'opacity'0
    ,'cursor''pointer'
    ,'display' 'none'
    ,'zIndex' 2147483583 //Max zIndex supported by Opera 9.0-9.2x 
    // Strange, I expected 2147483647                    
    };
    for (var 
    i in styles){
    input.style[i] = styles[i];
    }

    // Make sure that element opacity exists
    // (IE uses filter instead)
    if ( ! (input.style.opacity === "0")){
    input.style.filter "alpha(opacity=0)";
    }

    this._parentDialog.appendChild(input);

    addEvent(input'change', function(){
    // get filename from input
    var file fileFromPath(this.value);    
    if(
    self._settings.onChange.call(selffilegetExt(file)) == false ){
    return;                
    }                                                        
    // Submit form when value is changed
    if (self._settings.autoSubmit){
    self.submit();                        
    }                        
    });

    // Fixing problem with Safari
    // The problem is that if you leave input before the file select dialog opens
    // it does not upload the file.
    // As dialog opens slowly (it is a sheet dialog which takes some time to open)
    // there is some time while you can leave the button.
    // So we should not change display to none immediately
    addEvent(input'click', function(){
    self.justClicked true;
    setTimeout(function(){
    // we will wait 3 seconds for dialog to open
    self.justClicked false;
    }, 
    3000);            
    });        

    this._input input;
    },
    _rerouteClicks : function (){
    var 
    self this;

    // IE displays 'access denied' error when using this method
    // other browsers just ignore click()
    // addEvent(this._button, 'click', function(e){
    //  self._input.click();
    // });

    var boxdialogOffset = {top:0left:0}, over false;                            
    addEvent(self._button'mouseover', function(e){
    if (!
    self._input || over) return;
    over true;
    box getBox(self._button);

    if (
    self._parentDialog != d.body){
    dialogOffset getOffset(self._parentDialog);
    }    
    });


    // we can't use mouseout on the button,
    // because invisible input is over it
    addEvent(document'mousemove', function(e){
    var 
    input self._input;            
    if (!
    input || !over) return;

    if (
    self._disabled){
    removeClass(self._button'hover');
    input.style.display 'none';
    return;
    }    

    var 
    getMouseCoords(e);

    if ((
    c.>= box.left) && (c.<= box.right) && 
    (
    c.>= box.top) && (c.<= box.bottom)){            
    input.style.top c.dialogOffset.top 'px';
    input.style.left c.dialogOffset.left 'px';
    input.style.display 'block';
    addClass(self._button'hover');                
    } else {        
    // mouse left the button
    over false;
    if (!
    self.justClicked){
    input.style.display 'none';
    }
    removeClass(self._button'hover');
    }            
    });            

    },
    /**
    * Creates iframe with unique name
    */
    _createIframe : function(){
    // unique name
    // We cannot use getTime, because it sometimes return
    // same value in safari :(
    var id getUID();

    // Remove ie6 "This page contains both secure and nonsecure items" prompt 
    // http://tinyurl.com/77w9wh
    var iframe toElement('<iframe src="java script:false;" class="iframe" name="' id '" />');
    iframe.id id;
    iframe.style.display 'none';
    d.body.appendChild(iframe);            
    return 
    iframe;                        
    },
    /**
    * Upload file without refreshing the page
    */
    submit : function(){
    var 
    self thissettings this._settings;    

    if (
    this._input.value === ''){
    // there is no file
    return;
    }

    // get filename from input
    var file fileFromPath(this._input.value);            

    // execute user event
    if (! (settings.onSubmit.call(thisfilegetExt(file)) == false)) {
    // Create new iframe for this submission
    var iframe this._createIframe();

    // Do not submit if user function returns false                                        
    var form this._createForm(iframe);
    form.appendChild(this._input);

    form.submit();

    d.body.removeChild(form);                
    form null;
    this._input null;

    // create new input
    this._createInput();

    var 
    toDeleteFlag false;

    addEvent(iframe'load', function(e){
    if (
    iframe.src == "about:blank"){                        
    // First time around, do not delete.
    if( toDeleteFlag ){
    // Fix busy state in FF3
    setTimeout( function() {
    d.body.removeChild(iframe);
    }, 
    0);
    }
    return;
    }                

    var 
    doc iframe.contentDocument iframe.contentDocument frames[iframe.id].document;

    // fixing Opera 9.26
    if (doc.readyState && doc.readyState != 'complete'){
    // Opera fires load event multiple times
    // Even when the DOM is not ready yet
    // this fix should not affect other browsers
    return;
    }

    // fixing Opera 9.64
    if (doc.body && doc.body.innerHTML == "false"){
    // In Opera 9.64 event was fired second time
    // when body.innerHTML changed from false 
    // to server response approx. after 1 sec
    return;                
    }

    var 
    response;

    if (
    doc.XMLDocument){
    // response is a xml document IE property
    response doc.XMLDocument;
    } else if (
    doc.body){
    // response is html document or plain text
    response doc.body.innerHTML;
    if (
    settings.responseType == 'json'){
    response window["eval"]("(" response ")");
    }
    } else {
    // response is a xml document
    var response doc;
    }

    settings.onComplete.call(selffileresponse);

    // Reload blank page, so that reloading main page
    // does not re-submit the post. Also, remember to
    // delete the frame
    toDeleteFlag true;                
    $(
    iframe).empty(); //load event fired                                                 
    });

    } else {
    // clear input to allow user to select same file
    // Doesn't work in IE6
    // this._input.value = '';
    d.body.removeChild(this._input);                
    this._input null;

    // create new input
    this._createInput();                        
    }
    },        
    /**
    * Creates form, that will be submitted to iframe
    */
    _createForm : function(iframe){
    var 
    settings this._settings;

    // method, enctype must be specified here
    // because changing this attr on the fly is not allowed in IE 6/7        
    var form toElement('<form method="post" enctype="multipart/form-data"></form>');
    form.style.display 'none';
    form.action settings.action;
    form.target iframe.name;
    d.body.appendChild(form);

    // Create hidden input element for each data key
    for (var prop in settings.data){
    var 
    el d.createElement("input");
    el.type 'hidden';
    el.name prop;
    el.value settings.data[prop];
    form.appendChild(el);
    }            
    return 
    form;
    }    
    };
    })();
    Помогите доделать. Если нужно содержимое файла upload.php,напишу.Зарание спасибо.
     
  2. ABarmin

    ABarmin Гость

    Репутация:
    0
    В onComplete() добавьте показ информации:

    Код:
    onComplete : function(file, response){
    //hide the loading animation
    $("#loading").hide();
    
    //add display:block to success message holder
    $(".success").css("display", "block");
    
    var oBody = $(".iframe").contents().find("div");
    //add the iFrame to the errormes td
    $(oBody).appendTo("#file_holder #errormes");
    
    $("#infoField").val("Какая-то информация о файле");
    }
     
Загрузка...
Статус темы:
Закрыта.

Поделиться этой страницей